스크롤바가 웹 페이지를 재배치하지 못하게하는 방법은 무엇입니까?

중앙 정렬 DIV가있는 웹 사이트가 있습니다. 이제 일부 페이지는 스크롤이 필요하지만 일부는 스크롤이 필요하지 않습니다. 한 유형에서 다른 유형으로 이동할 때 스크롤 막대 모양으로 인해 페이지가 몇 픽셀 씩 옆으로 이동합니다. 각 페이지에 스크롤 막대를 명시 적으로 표시하지 않고 이것을 피할 수있는 방법이 있습니까?

overflow-y : scroll은 정확하지만 body가 아닌 html 태그와 함께 사용해야합니다. 그렇지 않으면 IE 7에서 이중 스크롤 막대가 표시
되므로 올바른 CSS는 다음과 같습니다.

html {
  overflow-y: scroll;
}

스크롤 가능한 요소의 내용을 div로 감싸고 적용하십시오 padding-left: calc(100vw - 100%);.

<body>
    <div style="padding-left: calc(100vw - 100%);">
        Some Content that is higher than the user's screen
    </div>
</body>

트릭은 100vw스크롤 막대를 포함하여 뷰포트의 100 % 를 나타냅니다. 100%스크롤 막대가없는 사용 가능한 공간 인 을 빼면 스크롤 막대의 너비로 끝나거나 0없는 경우입니다. 왼쪽에 해당 너비의 안쪽 여백을 만들면 두 번째 스크롤 막대가 시뮬레이션되어 중앙에있는 내용이 오른쪽으로 다시 이동합니다.

이것은 스크롤 가능한 요소가 페이지의 전체 너비를 사용하는 경우에만 작동하지만 스크롤 가능한 내용을 중앙에 배치 한 다른 경우가 거의 없기 때문에 대부분의 경우 문제가되지 않습니다.

나는 그렇게 생각하지 않는다. 그러나 스타일링 body은 overflow: scroll해야합니다. 그래도 당신은 그것을 알고있는 것 같습니다.

스크롤이 항상 표시되면 레이아웃에 적합하지 않을 수 있습니다.

CSS3로 몸통 너비를 제한하십시오.

body {
    width: calc(100vw - 34px);
}

vw뷰포트의 폭이다 ( 이 링크를 몇 가지 설명을위한)을
calcCSS3의 계산은
34px(참조 이중 스크롤 폭의 약자 이 고정 또는 이 계산 은 고정 된 크기를 신뢰하지 않는 경우)

html {
  overflow-x: hidden;
  margin-right: calc(-1 * (100vw - 100%));
}

예 . "최소 높이 변경"버튼을 클릭하십시오.

와 calc(100vw - 100%)우리가 스크롤 바의 폭을 계산할 수있다 (그리고이 표시되지 않은 경우, 그것은 0입니다). 아이디어 : 음수 오른쪽 여백을 사용하여 너비 <html>를이 너비로 늘릴 수 있습니다 . 가로 스크롤 막대가 나타납니다 overflow-x: hidden.를 사용하여 숨겨야 합니다.

이 게시물이 오래된 게시물인지 모르겠지만 같은 문제가 있었으며 세로로 스크롤하려는 경우 시도해야합니다 overflow-y:scroll

크기를 변경하거나 일부 데이터를로드 한 후 스크롤 막대를 추가하면 다음을 시도하고 클래스를 만들고이 클래스를 적용 할 수 있습니다.

.auto-scroll {
   overflow-y: overlay;
   overflow-x: overlay;
}

자바 스크립트에서 본문의 너비를 뷰포트 크기에서 스크롤 막대의 너비를 뺀 크기로 명시 적으로 설정하여 내 웹 사이트 중 하나에서 문제를 해결했습니다. 여기 에 문서화 된 jQuery 기반 함수를 사용 하여 스크롤 막대의 너비를 결정합니다.

<body id="bodyid>

var bodyid = document.getElementById('bodyid');
bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";

이것을 사용하여 답변을 확장 :

body {
    width: calc(100vw - 17px);
}

한 의견 제시자는 센터링을 유지하기 위해 왼쪽 패딩을 추가 할 것을 제안했습니다.

body {
    padding-left: 17px;
    width: calc(100vw - 17px);
}

그러나 콘텐츠가 뷰포트보다 넓은 경우 상황이 올바르게 보이지 않습니다. 이를 해결하기 위해 다음과 같은 미디어 쿼리를 사용할 수 있습니다.

@media screen and (min-width: 1058px) {
    body {
        padding-left: 17px;
        width: calc(100vw - 17px);
    }
}

여기서 1058px = 콘텐츠 너비 + 17 * 2

이렇게하면 가로 스크롤 막대가 x 오버플로를 처리하고 뷰포트가 고정 너비 컨텐츠를 포함 할만큼 충분히 넓을 때 중앙 컨텐츠를 중앙에 유지합니다

Rapti의 답변을 확장 하면 이것도 잘 작동하지만 페이지 레이아웃에 영향을 줄 수있는 추가 패딩을 추가하는 대신 오른쪽에 더 많은 여백을 추가 body하고 부정적인 html여백으로 숨 깁니다 . 이런 식으로 실제 페이지 (대부분의 경우)에서 아무것도 변경되지 않으며 코드는 여전히 작동합니다.

html {
    margin-right: calc(100% - 100vw);
}
body {
    margin-right: calc(100vw - 100%);
}

@kashesandr의 솔루션 은 저에게 효과적 이지만 가로 스크롤 막대를 숨기려면 본문에 스타일을 하나 더 추가했습니다. 여기에 완전한 해결책이 있습니다 :

CSS

<style>
/* prevent layout shifting and hide horizontal scroll */
html {
  width: 100vw;
}
body {
  overflow-x: hidden;
}
</style>

JS

$(function(){
    /**
     * For multiple modals.
     * Enables scrolling of 1st modal when 2nd modal is closed.
     */
    $('.modal').on('hidden.bs.modal', function (event) {
      if ($('.modal:visible').length) {
        $('body').addClass('modal-open');
      }
    });
});

JS Only Solution (두 번째 모달이 첫 번째 모달에서 열린 경우) :

/**
 * For multiple modals.
 * Enables scrolling of 1st modal when 2nd modal is closed.
 */
$('.modal').on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
    $('body').css('padding-right', 17);
  }
});

트위터 부트 스트랩 .modal-open클래스에 적용된 것과 동일한 문제를 해결하려고 했습니다 body. 해결책 html {overflow-y: scroll}은 도움이되지 않습니다. 내가 찾은 가능한 해결책 중 하나 {width: 100%; width: 100vw}는 html요소 에 추가 하는 것 입니다.

나는 그 문제를 가지고 있지만, 그것을 고치는 간단한 방법은 이것입니다 (이것은 저에게 효과적입니다).

CSS 파일 유형에서 :

body{overflow-y:scroll;}

그렇게 간단합니다! :)

calc (100vw-100 %)를 사용하여 게시 된 솔루션이 올바른 궤도에 있지만 문제가 있습니다. 콘텐츠가 전체 뷰포트를 채 웁니다.

미디어 쿼리 로이 문제를 해결하려고하면 창 크기를 조정할 때 마진이 점차 작아지지 않기 때문에 어색한 순간이 생깁니다.

그 문제를 해결하는 솔루션이 있으며 AFAIK에는 단점이 없습니다.

콘텐츠를 중앙에 맞추기 위해 margin : auto를 사용하는 대신 다음을 사용하십시오.

body {
margin-left: calc(50vw - 500px);
}

500px를 내용의 최대 너비의 절반으로 바꿉니다 (이 예에서는 내용 max-width는 1000px 임). 내용은 지금 중앙에 유지됩니다 및 내용이 뷰포트를 채울 때까지 마진은 점진적으로 모든 방법을 감소합니다.

뷰포트가 최대 너비보다 작을 때 여백이 마이너스가되는 것을 막으려면 다음과 같이 미디어 쿼리를 추가하십시오.

@media screen and (max-width:1000px) {
    body {
        margin-left: 0;
    }
}

vo!

표의 너비가 변경되지 않으면 스크롤바를 포함하는 요소 (예 : tbody)의 너비를 100 % 이상으로 설정하고 (스크롤바에 추가 공간을 허용 함) overflow-y를 "overlay"로 설정할 수 있습니다. 스크롤바는 고정되어 있고 표가 나타날 때 왼쪽으로 이동하지 않습니다). 또한 스크롤 막대가있는 요소의 고정 높이를 설정하면 높이를 초과하면 스크롤 막대가 나타납니다. 이렇게 :

tbody {
  height: 100px;
  overflow-y: overlay;
  width: 105%
}

참고 : 스크롤 막대가 차지하는 공간의 %가 테이블 너비를 기준으로하기 때문에 너비 %를 수동으로 조정해야합니다 (예 : 픽셀 너비가 일정하므로 테이블 너비가 작을수록 스크롤 막대를 맞추는 데 더 많은 %가 필요함) )

동적 테이블 예 :

function addRow(tableID)
{
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
  
    for(var i=0; i<colCount; i++)
    {
        var newRow = row.insertCell(i);

        newRow.innerHTML = table.rows[0].cells[i].innerHTML;
        newRow.childNodes[0].value = "";
    }
}
 
function deleteRow(row)
{
    var table = document.getElementById("data");
    var rowCount = table.rows.length;
    var rowIndex = row.parentNode.parentNode.rowIndex;

    document.getElementById("data").deleteRow(rowIndex);
}

.scroll-table {
  border-collapse: collapse;
}

.scroll-table tbody {
  display:block;
  overflow-y:overlay;
  height:60px;
  width: 105%
}

.scroll-table tbody td {
  color: #333;
  padding: 10px;
  text-shadow: 1px 1px 1px #fff;
}

.scroll-table thead tr {
  display:block;
}

.scroll-table td {
    border-top: thin solid; 
    border-bottom: thin solid;
}

.scroll-table td:first-child {
    border-left: thin solid;
}

.scroll-table td:last-child {
    border-right: thin solid;
}

.scroll-table tr:first-child {
    display: none;
}

.delete_button {
    background-color: red;
    color: white;
}

.container {
  display: inline-block;
}

body {
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="test_table.css">
</head>

<body>
<h1>Dynamic Table</h1>
<div class="container">

  <table id="data" class="scroll-table">
    <tbody>
      <tr>
        <td><input type="text" /></td>
        <td><input type="text" /></td>
        <td><input type="button" class="delete_button" value="X" onclick="deleteRow(this)"></td>
      </tr>
    </tbody>
  </table>

  <input type="button" value="Add" onclick="addRow('data')" />

</div>

<script src="test_table.js"></script>
</body>
</html>

이와 같이 컨테이너 요소의 너비를 설정하면 트릭이 수행됩니다.

width: 100vw;

그러면 해당 요소가 스크롤 막대를 무시하고 배경색이나 이미지와 함께 작동합니다.

나는 이것을 해결하기 위해 jquery를 사용했다.

$('html').css({
    'overflow-y': 'hidden'
});

$(document).ready(function(){
  $(window).load(function() {
    $('html').css({
      'overflow-y': ''
    });
  });
});

@media screen and (min-width: 1024px){
    body {
    min-height: 700px
    }
}

내용이 화면에 넘치지 않더라도 브라우저 창에 영구 스크롤 막대 를 제안하는 허용되는 대답과 달리 다음을 사용하는 것이 좋습니다 .

html{
  height:101%;
}

내용이 실제로 오버플로 되면 스크롤 막대 모양이 더 의미가 있기 때문 입니다.

이 보다 더 많은 의미가 있습니다 이 .