스크롤 바가 크롬의 페이지 너비에 추가되지 않도록 합니다.

스크롤 바가 크롬의 페이지 너비에 추가되지 않도록 합니다.

Chrome에서 .html 페이지를 일정한 폭으로 유지하는 데 작은 문제가 있습니다.

예를 들어, 뷰포트의 내용을 오버플로하는 내용이 많은 페이지(1)가 있습니다(단어 맞습니까?).높이, 그 페이지(1)에 세로 스크롤 바가 있습니다.(2)페이지에서, 저는 같은 레이아웃(메뉴, 디브 등)을 가지고 있지만 내용은 적으므로 세로 스크롤 바가 없습니다.

문제는 (1)페이지에서 스크롤 바가 요소를 약간 왼쪽으로 밀어주는 것처럼 보이는 반면 (2)페이지를 중심으로 모든 것이 잘 나타난다는 것입니다.

저는 아직 HTML/CSS/JS에 초보자이고, 이것이 그렇게 어렵지 않다고 꽤 확신하지만, 해결책을 찾는 데에는 운이 없었습니다.IE10에서 의도한 대로 작동하며 파이어폭스(무간섭 스크롤 바)는 크롬에서만 접했습니다.

면책 사항: 오버레이가 더 이상 사용되지 않습니다.
꼭 사용해야 하는 경우에도 사용할 수 있지만 사용하지 않도록 노력합니다.

이것은 웹킷 브라우저에서만 작동하지만, 저는 이것을 매우 좋아합니다.그렇게 행동할 것입니다.auto다른 브라우저에서도

.yourContent{
   overflow-y: overlay;
}

이렇게 하면 스크롤 막대가 오버레이로만 표시되므로 요소의 너비에 영향을 주지 않습니다!

다음만 추가하면 됩니다.

html {
    overflow-y: scroll;
}

당신의 CSS 파일에서, 이것은 그것이 필요한지 아닌지에 대한 스크롤러를 가질 것이기 때문에, 당신은 스크롤을 할 수 없을 것입니다.

이는 뷰포트의 너비가 둘 다 동일하다는 것을 의미합니다.

아마

html {
    width: 100vw;
}

당신이 원하는 것입니다.

2021년 솔루션은 다음과 같습니다.scrollbar-gutter 가 하는 을 에 합니다 으로 합니다 으로 에 가 하는 을

사용하다

.element-class {
   scrollbar-gutter: stable both-edges;
}

both-edges선택 사항입니다.

https://caniuse.com/mdn-css_properties_scrollbar-gutter 및 https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter 도 참조하십시오.

overflow: overlay사용되지 않습니다.

다음은 다양한 가능성에 대한 설명을 위한 코드펜입니다. https://codepen.io/waxolunist/pen/ExweBMz

스크롤 바 크기를 구한 다음 용기에 여백을 적용할 수 있습니다.

이와 같은 것:

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-scrollbar 제거를 위한 CSS:

body{
    overflow-x:hidden;
}

이것을 확인해 보세요: http://jsfiddle.net/NQAzt/

Safari나 Chrome과 같은 웹킷 브라우저는 너비를 100% 또는 100vw로 계산할 때 스크롤 바 너비를 눈에 보이는 페이지 너비에서 빼줍니다.DM Rutherford의 Scrolling and Page Width에서 더 많은 정보를 얻을 수 있습니다.

를 사용해 .overflow-y: overlay대신.

추가할 수 있다는 걸 알았어요

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

내 CSS에 직접 연결하면 스크롤 바가 보이지 않지만 여전히 (적어도 크롬에서는) 스크롤할 수 있습니다.당신의 페이지에 주의를 산만하게 하는 스크롤 바를 원하지 않을 때 좋습니다!

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

body {
    width: calc( 100% );
    max-width: calc( 100vw - 1em );
}

는 기본 스크롤 막대에서도 작동합니다. 는 다음을 추가할 수 있습니다.

overflow-x: hidden;

수평 스크롤 막대가 부모 프레임에 대해 숨겨지도록 합니다.이것이 당신의 고객들로부터 요구되지 않는 한.

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

하지만 기본적으로 필요한 작업과 동적으로 수행하려고 했던 작업은 컨텐츠의 너비를 상위 스크롤 가능한 창보다 약간 작게 설정하는 것입니다.
스크롤 막대가 나타나면 내용에 영향을 주지 않도록 합니다.

이 예는 하드 코딩을 통해 그 목표를 달성하는 보다 까다로운 방법을 보여줍니다.width브라우저가 우리를 위해 그것을 하도록 시도하는 대신에 s.padding.
이 방법이 가능한 경우 영구 스크롤 막대를 사용하지 않으려면 이 방법이 가장 간단한 방법입니다.

_{편집: 이 답변은 현재로서는 정확하지 않습니다. 다른 답변을 참조하여 제가 여기서 무엇을 하려고 했는지 확인하십시오.제가 해결하려고 하는데, 도움을 주시면 댓글로 해주시면 감사하겠습니다.}

을 해서.padding-right는 스크롤 입니다.

예

점에서 볼 수 있듯이 텍스트는 스크롤 막대가 있는지 여부에 관계없이 래핑하기 전에 페이지의 동일한 지점으로 이동합니다.
왜냐하면 스크롤 바가 도입되면 패딩이 그 뒤로 숨어서 스크롤 바가 텍스트를 누르지 않기 때문입니다!

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

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

사실 이것이 저에게 유일하게 효과가 있었습니다.

크롬에서도 같은 문제가 있었습니다.스크롤 막대가 항상 보일 때에만 발생했습니다. (일반 설정에서 볼 수 있습니다.) 저는 모달을 가지고 있는데 모달을 열었을 때...

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('scroll Height')는 항상 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;
}

스크롤 바에서 겪었던 비슷한 문제를 이런 식으로 해결했습니다.

먼저 세로 스크롤 막대를 다음과 같이 설정하여 비활성화합니다.

overflow-y: hidden;

그런 다음 화면 높이와 같은 높이로 고정된 위치의 디브를 만들고 폭을 얇게 만들어 스크롤 바처럼 보이게 합니다.이 디브는 세로로 스크롤 가능해야 합니다.이제 이 디브 안에서 문서의 높이를 가진 다른 디브를 만들 수 있습니다. (모든 내용을 포함하여).)이제 컨테이너 div에 onScroll 기능을 추가하고 div가 스크롤 할 때 스크롤 바디를 추가하기만 하면 됩니다.코드는 다음과 같습니다.

HTML:

<div onscroll="OnScroll(this);" style="width:18px; height:100%;  overflow-y: auto; position: fixed; top: 0; right: 0;">
    <div id="ScrollDiv" style="width:28px; height:100%; overflow-y: auto;">
    </div>
</div>

그런 다음 페이지 로드 이벤트에서 다음을 추가합니다.

JS:

$( document ).ready(function() {
    var body = document.body;
    var html = document.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
    document.getElementById('ScrollDiv').style.height = height + 'px'; 
});

function OnScroll(Div) {
    document.body.scrollTop = Div.scrollTop;
}

이제 디브를 스크롤하는 것은 바디가 스크롤 바가 없는 동안 바디를 스크롤하는 것과 마찬가지로 작동합니다.

Chrome and Edge(FireFox가 아닌)에서 스크롤 바의 추가 폭이라는 동일한 문제에 부딪혔습니다.

프로젝트의 논리는 일부 컨테이너 위를 맴돌면 스크롤을 중지하는 것이었습니다.그래서 나는 한 몸에 클래스를 추가했습니다.

    body.no-scrolling {
    overflow: hidden;
    }

스크롤 방지에는 도움이 되지만 스크롤 바는 없앴습니다.파이어폭스에서는 문제가 되지 않았지만 크롬과 엣지에서는 콘텐츠가 스크롤 바의 공간을 채우고 페이지의 콘텐츠를 만들어 오른쪽으로 이동했습니다.

그래서 제게 도움이 된 해결책은 다음과 같습니다.

    html{
    width: 100vw;
    }

이 규칙은 스크롤 바가 사라진 직후에는 내용을 이동할 수 없도록 했지만, 추가 너비를 추가하고 페이지 하단에 스크롤 바를 표시했습니다.추가 너비를 숨기기 위해 추가했습니다.

     body{
     overflow-x: hidden;
     }

당신에게도 도움이 되었는지 알려주세요.

Header nav와 비슷한 문제가 있었습니다.한 페이지를 제외하고 대부분의 페이지에 스크롤 y를 트리거할 수 있는 충분한 콘텐츠가 있었습니다.

내 헤더 내비게이션에는 2명의 아이가 있는 플렉스 컨테이너가 있습니다.flexContainer에는 5rem의 왼쪽과 오른쪽 패딩이 있습니다.

header { padding-left: calc(100vw - 100%;)}

이것을 헤더에 추가하면 스크롤 막대 너비를 왼쪽에 추가하여 내용의 중심을 잡습니다.이제 요소가 중앙에 있지만 스크롤바 너비만큼 헤더 너비를 효과적으로 축소했습니다.

flexContainer {padding: 0rem calc(5rem - calc((100vw - 100%)/2));}

나는 flexContainer의 패딩을 줄여서 스크롤바 폭을 다시 추가하고 있습니다.

이렇게 하면 스크롤-y가 트리거되는지 여부에 관계없이 내용이 제자리에 유지됩니다.

저도 비슷한 문제가 있었습니다.호버에서 스크롤을 하려고 했는데 계속 밀려서 UX가 형편없었습니다.나는 그것에 대한 쉬운 해결책을 찾았습니다.스크롤 바는 그대로 두되 투명하게 하고 커서가 디브 위를 맴돌면 다시 가져다 줍니다.스크롤 바는 항상 있기 때문에 디바의 다른 요소의 디자인을 수정하지 않습니다.

$(document).ready(function() {
$('#list-parent').hover(

    function() {
        $("#list-parent").removeClass('scrollbar-invisible');
                $("#list-parent").addClass('scrollbar');

    }, function() {
        $("#list-parent").addClass('scrollbar-invisible');
                $("#list-parent").removeClass('scrollbar');
    });
})

.main-div {
  height: 100px;
  width: 400px;
  overflow: hidden;
}

.list-parent {
  height: 100px;
  background-color: yellow;
  overflow: scroll;
  padding:20px;
  width:150px;
}

 .scrollbar-invisible::-webkit-scrollbar{
    border: 3px solid #ffffff00;
    width: 5px;
    height: 20px;
  }
  
  .scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 20px;
  }


  .scrollbar::-webkit-scrollbar-thumb {
    border-radius: 100vh;
    border: 3px solid black;
    padding-left: 20px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="app" class='main-div'>
  <div id ='list-parent' class='list-parent scrollbar-invisible'>
    <div style='background-color:pink'>
      <h1> Todos: </h1>
      <ol>
        <li>Test Item </li>
        <li>Test Item </li>
        <li>Test Item </li>
        <li>Test Item </li>
        <li>Test Item </li>
        <li>Test Item </li>
        <li>Test Item </li>
      </ol>
    </div>
  </div>
</div>

스크롤 바 거터가 이전 브라우저를 지원하지 않음

여기 js 솔루션 지원 오래된 브라우저가 있습니다.

box 에서 크기 set box 에서 에서 box-sizing: 'border-box"ㅠㅠ

가 js.scrollView.style.boxSizing = "border-box", 등의 렌더링을 합니다.scroll-gutter:stable

예를 들어 탐색 및 바닥글과 같이 웹 사이트 콘텐츠 위에 포장지로 사용하는 컨테이너가 있으면 다음을 추가할 수 있습니다.

min-height: 101vh;

이렇게 하면 스크롤 바가 사라지지 않고 폭이 그대로 유지되도록 페이지가 1vh 길어집니다.

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