Chrome에서 스크롤바가 페이지 너비에 추가되는 것을 방지

Chrome에서 .html 페이지를 일관된 너비로 유지하려는 작은 문제가 있습니다. 그 페이지 (1). 페이지 (2)에서 동일한 레이아웃 (메뉴, div 등)을 가지고 있지만 콘텐츠가 적기 때문에 수직 스크롤 막대가 없습니다.

문제는 (1) 페이지에서 스크롤 막대가 요소를 약간 왼쪽으로 밀어내는 것 (너비에 더해 지나요?)이지만 모든 것이 페이지의 중앙에 잘 맞춰진 것 같습니다 (2).

나는 여전히 HTML / CSS / JS의 초보자이고 이것이 그렇게 어렵지 않다고 확신하지만 해결책을 알아낼 운이 없었습니다. IE10 및 FireFox (비 간섭 스크롤바)에서 의도 한대로 작동하지만 Chrome에서만 발생했습니다.

스크롤바 크기를 얻은 다음 컨테이너에 여백을 적용 할 수 있습니다.

이 같은:

var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}

h- 스크롤바 제거를위한 CSS :

body{
    overflow-x:hidden;
}

이것을보십시오 : http://jsfiddle.net/NQAzt/

DISCLAIMER : 오버레이 는 더 이상 사용되지 않습니다 .
꼭 필요한 경우 여전히 이것을 사용할 수 있지만 사용하지 마십시오.

이것은 WebKit 브라우저에서만 작동 하지만 많이 좋아합니다. auto다른 브라우저 에서처럼 작동 합니다.

.yourContent{
   overflow-y: overlay;
}

이렇게하면 스크롤바가 오버레이 로만 나타나 므로 요소 의 너비 에 영향을주지 않습니다 !

다음을 추가하기 만하면됩니다.

html {
    overflow-y: scroll;
}

CSS 파일에서 필요한지 여부에 관계없이 스크롤러가 있지만 스크롤 할 수는 없습니다.

즉, 뷰포트의 너비는

아마

html {
    width: 100vw;
}

당신이 원하는 것입니다.

Safari 및 Chrome과 같은 Webkit 브라우저는 너비 (100 % 또는 100vw)를 계산할 때 보이는 페이지 너비에서 스크롤 막대 너비를 뺍니다. DM Rutherford의 스크롤링 및 페이지 너비에 대해 자세히 알아보십시오 .

overflow-y: overlay대신 사용해보십시오 .

추가 할 수 있음을 알았습니다.

::-webkit-scrollbar { 
display: none; 
}

내 CSS에 직접 연결하면 스크롤 막대가 보이지 않지만 여전히 스크롤 할 수 있습니다 (적어도 Chrome에서). 페이지에 산만 한 스크롤바를 원하지 않을 때 유용합니다!

너비가 고정 된 컨테이너의 경우 컨테이너를 다른 div로 래핑하고 두 div에 동일한 너비를 적용하여 순수한 CSS 크로스 브라우저 솔루션을 구현할 수 있습니다.

#outer {
  overflow-y: auto;
  overflow-x: hidden;
  /*
   * width must be an absolute value otherwise the inner divs width must be set via
   * javascript to the computed width of the parent container
   */
  width: 200px;
}

#inner {
  width: inherit;
}

Codepen에 대한 예제를 보려면 여기를 클릭하십시오.

내 다른 대답이 현재 제대로 작동하지 않는 것 같습니다 (하지만 계속 작동하도록 노력할 것입니다).

그러나 기본적으로 수행해야 할 작업과 동적으로 수행하려는 작업은 콘텐츠의 너비를 스크롤 가능한 부모 창의 너비보다 약간 작게 설정하는 것입니다.
따라서 스크롤바가 나타날 때 콘텐츠에 영향을주지 않습니다.

이 예제 는 width브라우저가를 통해 우리를 위해 그것을하도록하는 대신 s를 하드 코딩함으로써 그 목표를 달성하는 더 엉뚱한 방법을 보여줍니다 padding.
이것이 가능하다면 영구적 인 스크롤바를 원하지 않는 가장 간단한 해결책입니다.

_{편집 : 이 대답은 현재 옳지 않습니다. 다른 대답을 참조하여 여기에서 무엇을하려고했는지 확인하십시오. 나는 그것을 고치려고 노력하고 있지만 도움을 줄 수 있다면 의견에 그렇게하십시오. 감사합니다!}

를 사용 padding-right하면 스크롤바의 갑작스런 모양이 완화됩니다.

예

점에서 볼 수 있듯이 텍스트는 스크롤 막대가 있는지 여부에 관계없이 줄 바꿈 전에 페이지의 동일한 지점으로 이동합니다.
스크롤바가 도입되면 패딩이 그 뒤에 숨겨져 스크롤바가 텍스트를 밀지 않기 때문입니다!

.modal-dialog {
   position: absolute;
   left: calc(50vw - 300px);
}

여기서 300px는 대화 창 너비의 절반입니다.

이것은 실제로 나를 위해 일한 유일한 것입니다.

Chrome에서 동일한 문제가 발생했습니다. 스크롤 막대가 항상 표시되는 경우에만 발생했습니다. (일반 설정에서 찾았습니다) 모달이 있는데 모달을 열었을 때 ...

body {
    padding-left: 15px;
}

몸에 추가됩니다. 이 일이 발생하지 않도록 나는 추가했습니다

body {
    padding-left: 0px !important;
}

첫 번째 답변에 대한 의견을 추가 할 수 없으며 오랜 시간이 지났지 만 데모에는 문제가 있습니다.

if(b.prop('scrollHeight')>b.height()){
    normalw = window.innerWidth;
    scrollw = normalw - b.width();
    $('#container').css({marginRight:'-'+scrollw+'px'});
}

b.prop ( 'scrollHeight')는 항상 b.height ()와 같습니다.

다음과 같아야한다고 생각합니다.

if(b.prop('scrollHeight')>window.innerHeight) ...

마침내 나는 방법을 추천한다 :

html {
 overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
 width: 100vw;
 overflow: hidden;
}