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

218

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

html css

— 드미트리 네 스테 룩
소스

6

overflow-y: overlay이 글에서 아무도 언급하지 않은 이유는 무엇 입니까?

— milkersarac

3

모질라 문서에 따르면, overflow-y: overlay감가 상각 : developer.mozilla.org/en-US/docs/Web/CSS/overflow을

— drojf

266

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

html {
  overflow-y: scroll;
}

— 루벤
소스

1

IE 10+에는 플로팅 스크롤바가 있으므로 이러한 브라우저에서이 기능을 비활성화해야합니다

— Ruben

1

이것은 fancybox 또는 트위터 부트 스트랩 모달과 함께 사용할 때 이중 스크롤 막대와 같은 문제를 일으킬 수 있습니다

— Ruben

추가 정보 : 모달이 열려있을 때 트위터 부트 스트랩이 이제 .modal-open을 몸에 추가합니다

— Ruben

55

수직 스크롤 막대가 영구적으로 표시된다는 점을 언급 할 가치가 있습니다. 항상 허용되는 것은 아닙니다.

— rustyx

Chromium과 Firefox에서 이중 스크롤 막대를 얻습니다. flex-box를 사용하고 있습니다. 아마

— Garrett

72

스크롤 가능한 요소의 내용을 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없는 경우입니다. 왼쪽에 해당 너비의 안쪽 여백을 만들면 두 번째 스크롤 막대가 시뮬레이션되어 중앙에있는 내용이 오른쪽으로 다시 이동합니다.

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

— 랩티
소스

1

더 나은 인라인 스타일보다 클래스를 통해 적용 할 것인가, 단지에서 작동 이 브라우저 나는 깨달았다하지 않았다 -이 영리한 기술은 있지만 100vw그리고 100%나는이에서 유용하게 뭔가를 배웠어요, 그래서 다른 일을 측정!

— Nick F

21

이것은 절대적으로 천재적이며 calc에 대한 브라우저 지원이 매우 좋다는 것을 고려할 때 실제로 가장 좋은 대답입니다.

— 마이클

1

왼쪽에 여백을 추가하는 대신 오른쪽에 음의 여백을 추가하는 것을 제외하고 동일한 작업을 수행 할 수 있습니다 ( stackoverflow.com/a/39289453/6015444 참조 ).

— Touniouk

2

이 솔루션은 답변 "width : calc (100vw-34px);"와 같은 배경색과 비슷한 문제를 일으 킵니다. 그러나 왼쪽에.

— Maciej Lew

1

이 스타일에 미디어 쿼리를 추가하는 것이 좋습니다 @media screen and (min-width: 800px) {...} . 내용이 페이지 너비에 맞는 경우. 예를 들어 작은 해상도에서는 불필요한 간격이 생겨 내용이 오른쪽으로 이동합니다.

— MarkosyanArtur

44

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

— 마이클 크렐 린-해커
소스

3

좋은 소리 ... 페이지가 스크롤 막대를 필요할지 여부에 관계없이 항상 표시하도록 강제하십시오. 그러면 페이지 유형간에 시각적 인 변화가 없습니다.

— eidylon

1

예,하지만 IIRC는 두 스크롤바를 모두 보여 줍니다. 나는 실제로 수평이 필요하지 않습니다.

— Dmitri Nesteruk

사실입니다. 그러나 내가 당신을 도울 수있는 일은 많지 않습니다 :( 실제로, 나는 나의 답장의 첫 번째 문장 만이 질문을 다루는 실제 답변이라고 생각합니다.

— Michael Krelin-hacker

49

overflow-y: scroll:)

— Svish

2

다음은 더 나은 답변입니다

— Sami

36

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

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

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

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

— 모에시오
소스

4

누군가가 필요할 때까지 모든 것이 무익합니다.

— Moesio

3

이것은 허용 된 답변이 설명하는 것처럼 scollbar를 강요하는 것보다 시각적으로 훨씬 덜 관입 적입니다.

— Silas Hansen

4

이것은 지금까지 내 요구에 가장 잘 작동했으며 padding-left: 34px;페이지를 고르게 가운데에 배치했습니다.

— Pat Migliaccio

3

현재 승인 된 답변과 달리 실제로 답변되는 답변과 달리 승인 된 답변이어야합니다!

— Coz

2

당신이 등 신체 배경 또는 아래쪽 테두리 다른 색상 네비게이션 바 / 헤더가있는 경우이 문제가 발생할 것이다

— 지아 UL 레흐만 무굴

28

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

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

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

— 폰고
소스

나는 몸을 div에 넣고 div에 여백을 적용하여 작동하도록해야했습니다 ( Rapti의 답변 과 유사 ). 그러나 이것은 훨씬 더 깔끔해 보입니다.

— Touniouk

1

이것은 잘 작동하며 Chrome 또는 Firefox에서 원치 않는 가로 스크롤 막대가 나타나지 않는 것 같습니다. 왜 calc(100% - 100vw)곱하기 대신 사용 하지 -1않습니까?

— SystemParadox

13

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

13

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

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

— 쿤날 캄블
소스

3

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

<body id="bodyid>

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

— 프랭크 L
소스

10

나는 이것이 왜 그렇게 나쁜 습관인지 설명조차 시작할 수 없습니다.

— mythofechelon 2016 년

20

@ BenHooper : 이것이 왜 나쁜 습관인지 알고 싶습니다.

— Saad

1

창의 크기를 조정하면 어떻게됩니까?

— Braden Steffaniak

3

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

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 오버플로를 처리하고 뷰포트가 고정 너비 컨텐츠를 포함 할만큼 충분히 넓을 때 중앙 컨텐츠를 중앙에 유지합니다

— 그렉 세인트 오게
소스

3

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

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

— 그랜트 그라이 잔
소스

크롬에서 부트 스트랩 사이트에 세로 스크롤 막대가있는 페이지에 가로 스크롤이 추가된다는 것을 알았습니다.

— 생강 다람쥐

이유를 조사해 보셨습니까? 요소 검사기를 확인하여 부트 스트랩이 여백, 스크롤 막대 또는 이와 유사한 것으로 엉망인지 확인하십시오.

— Grant Gryczan 님이 31:18

1

부트 스트랩이 모든 것을 차지하는 15px 여백과 관련이 있었을 것입니다. 페이지를 검사 할 때 컨테이너 여백이 스크롤 막대 아래로 떨어집니다. 나는 그것을 적용 overflow-x: hidden하고 고쳤다.

— 생강 다람쥐

3

@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);
  }
});

— 하산 타렉
소스

2

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

— 캐쉬 산 드르
소스

1

또는 본문으로 변경 {overflow-y : scroll}

— Ruben

1

그러나 스크롤 막대가 필요하지 않더라도 항상 표시됩니다.

— 랩티

너비를 두 번 설정하는 이유를 설명해야합니까? html { width: 100vw; }나를 위해 일한

— 하산 타 레크

나를 위해 실제로 두 개의 스크롤 막대를 만듭니다

— rbansal

2

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

CSS 파일 유형에서 :

body{overflow-y:scroll;}

그렇게 간단합니다! :)

— 멜빈 게레로
소스

2

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!

— 조나단 SI
소스

2

표의 너비가 변경되지 않으면 스크롤바를 포함하는 요소 (예 : 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>

스 니펫 확장

— 로버트 제임스 미에 타
소스

1

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

width: 100vw;

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

— 바르 소낙스
소스

-3

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

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

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

— 윌 맥 밀리언
소스

3

이 솔루션에는 전체 JavaScript 프레임 워크가 필요하기 때문에 응답이 제대로 수신되지 않을 수 있습니다. "jQuery로 모든 것!"

— Paul Lammertsma

3

네, jQuery는 확실히 갈 길입니다 -doxdesk.com/img/updates/20091116-so-large.gif

— 익명의

-4

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

— 비키
소스

스택 오버플로에 오신 것을 환영합니다! 이 코드 스 니펫은 문제를 해결할 수 있지만 설명을 포함하면 게시물의 품질을 향상시키는 데 실제로 도움이됩니다. 앞으로 독자에게 질문에 대한 답변을 제공하고 있으며 해당 사람들이 귀하의 코드 제안 이유를 모를 수도 있습니다. 설명 주석으로 코드를 복잡하게 만들지 마십시오. 이렇게하면 코드와 설명의 가독성이 떨어집니다!

— Andrew Myers

-5

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

html{
  height:101%;
}

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

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

— 니 쿤즈 마도가 리아
소스

1

적어도 마지막 문장이 답에 잘못되었습니다. 프린터에서 빈 페이지를 너무 많이 인쇄하면 비슷합니다.

— vp_arth