防止Chrome浏览器中滚动条加宽页面的方法

_{编辑：目前这个答案不太正确，请参考我的其他答案以了解我在这里尝试做什么。我正在努力修复它，但如果您能在评论中提供帮助，那就请帮忙，谢谢！}

使用padding-right可以减轻滚动条突然出现的情况。

EXAMPLE

在Chrome和Edge浏览器中遇到了一个额外的滚动条宽度问题（在FireFox上没有）。

项目中的逻辑是在悬停在某个容器上后停止滚动。因此，我向body添加了一个类：

    body.no-scrolling {
    overflow: hidden;
    }

这有助于防止滚动，但会移除滚动条。在 FireFox 中没有问题，但在 Chrome 和 Edge 中，内容会填充滚动条的空间，使页面内容向右移动。

因此，对我有效的解决方案是：

    html{
    width: 100vw;
    }

这个规则可以防止内容在滚动条消失后向右移动，但是会增加额外的宽度并在页面底部出现滚动条。为了隐藏这个额外的宽度，我添加了以下代码：

     body{
     overflow-x: hidden;
     }

如果这对你有帮助，请告诉我。

我不能为第一个答案添加评论，而且已经很长时间了...但是那个演示有一个问题：

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

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

其中300像素是我的对话框宽度的一半。

实际上这是我唯一有效的方法。

我曾经遇到过类似的问题。我试图在鼠标悬停时滚动，但它一直会将其他元素推出去，导致用户体验很糟糕。后来我找到了一个简单的解决方案。我将滚动条保留在原位，但将其设置为透明，并在光标悬停在 div 上时再次显示。由于滚动条始终存在，因此不会修改 div 的其他元素的设计。

$(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解决方案来支持旧浏览器

在scrollView样式中设置boxSizing box-sizing: 'border-box" 不起作用

但是当scrollView被渲染时，js scrollView.style.boxSizing = "border-box"，使渲染像 scroll-gutter:stable

我在我的Header nav上遇到了类似的问题。我的大多数页面都有足够的内容来触发scroll-y，但有一个页面除外。

我的header nav有一个flexContainer，其中包含2个子元素（spaced-between）。flexContainer具有5rem的左右padding。

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

将此添加到header中，通过将滚动条宽度添加到左侧来使内容居中。现在元素已经居中，但我们实际上通过滚动条宽度缩小了header的宽度。

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

通过减少flexContainer的padding来添加回滚动条宽度。

这确保了我的内容保持不变，无论是否触发scroll-y。

我在Chrome上遇到了同样的问题。只有当滚动条始终可见时才会发生这种情况。（在常规设置中找到）我有一个模态框，当我打开模态框时，我注意到...

body {
    padding-left: 15px;
}

被添加到正文中。为了防止这种情况发生，我添加了

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

我曾经用以下方法解决了一个类似于滚动条的问题：

首先，通过设置垂直滚动条来禁用它：

overflow-y: hidden;

然后创建一个具有固定位置的div，其高度等于屏幕高度，并使其宽度变窄以看起来像滚动条。这个div应该是垂直可滚动的。现在，在这个div里面创建另一个div，其高度为您的文档（包括所有内容）的高度。现在，您需要做的就是向容器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;
}

现在滚动 div 的方式就像滚动没有滚动条的 body 一样。

min-height: 101vh;

这将通过增加1vh来“延长”您的页面，以确保滚动条永远不会消失，宽度保持不变。