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

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에서). 페이지에서 산만 한 스크롤바를 원하지 않을 때 유용합니다!

---

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

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

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

---

너비가 고정 된 컨테이너의 경우 컨테이너를 다른 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에 대한 예제를 보려면 여기를 클릭하십시오.

---

_{EDIT: this answer isn't quite right at the moment, refer to my other answer to see what I was attempting to do here. I'm trying to fix it up, but if you can offer assistance do so in the comments, thanks!}

Using padding-right will mitigate the sudden appearance of a scrollbar

EXAMPLE

As you can see from the dots, the text makes it to the same point in the page before wrapping, regardless of whether or not a scrollbar is present.
This is because when a scrollbar is introduced the padding hides behind it, so the scrollbar doesn't push on the text!

---

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

where 300 px is a half of my dialog window width.

This is actually the only thing that worked for me.

---

I had the same issue on Chrome. It only happened for me when the scroll bar is always visible. (found in the general settings) I have a modal and when I open the modal I noticed that...

body {
    padding-left: 15px;
}

is added to the body. To stop this from happening I added

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

---

I can't add comment for the first answer and it's been a long time... but that demo has a problem:

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

b.prop('scrollHeight') always equals b.height(),

I think it should be like this:

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

At last I recommend a method:

html {
 overflow-y: scroll;
}

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

:root body {
  position: absolute;
}

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

참고URL : https://stackoverflow.com/questions/18548465/prevent-scroll-bar-from-adding-up-to-the-width-of-page-on-chrome