防止滚动条增加到Chrome页面的宽度

我有一个小问题，试图保持我的。html页面在Chrome上的宽度一致， 例如，我有一个页面(1)，其中有很多内容超出了视口的高度，所以在该页面(1)上有一个垂直滚动条。在页面(2)上，我有相同的布局(菜单，div，…等)，但内容更少，所以没有垂直滚动条

问题在于，在第(1)页上，滚动条似乎将元素稍微推到左边(增加宽度?)，而在第(2)页上，所有内容似乎都处于中心位置。

我仍然是HTML/CSS/JS的初学者，我相当相信这不是那么难，但我没有运气想出解决方案。它在IE10和FireFox(无干扰滚动条)上都能正常工作，我只在Chrome上遇到过。

247911 次浏览
小开

你所需要做的就是添加:

html {
overflow-y: scroll;
}

在你的css文件中，无论是否需要，都会有滚动条尽管你不能滚动

这意味着两者的视口宽度相同

小开

EDIT:这个答案目前不太正确，参考我的其他答案，看看我在这里试图做什么。我正在努力解决它，但如果你能提供帮助，请在评论中这样做，谢谢!

使用padding-right将减轻滚动条的突然出现

EXAMPLE

chrome devtools显示填充未移动

从点状图中可以看出，无论滚动条是否存在，文本在换行前都会到达页面中的同一点 这是因为当滚动条被引入时，填充隐藏在它后面，所以滚动条不会推送文本!< / p >

小开
最佳答案

您可以获取滚动条大小，然后对容器应用边距。

就像这样:

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

CSS删除h-滚动条:

body{
overflow-x:hidden;
}
试着看看这个: http://jsfiddle.net/NQAzt/ < / p >
小开

目前我的另一个答案似乎不太正确(但我会继续尝试让它运行)。

但基本上你需要做的，以及它试图动态做的，是将内容的宽度设置为略小于父滚动窗格的宽度 因此，当滚动条出现时，它对内容没有影响 这个例子显示了一种更hack的方式来实现这个目标，通过硬编码__abc0，而不是试图让浏览器通过padding来为我们做这件事 如果这是可行的，这是最简单的解决方案，如果你不想要一个永久滚动条
小开

我发现我可以做加法

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

直接到我的css，它会使滚动条不可见，但仍然允许我滚动(至少在Chrome上)。当你不想在你的页面上有一个分散注意力的滚动条时，这很好!

小开

Safari和Chrome等Webkit浏览器在计算宽度时从可见页面宽度中减去滚动条宽度:100%或100vw。更多信息见DM卢瑟福的滚动和页面宽度。

尝试使用overflow-y: overlay代替。

小开

免责声明: 覆盖已被弃用.
如果你确实需要，你仍然可以使用它，但尽量不要这样做

这只适用于WebKit浏览器，但是我很喜欢它。 

.yourContent{
overflow-y: overlay;
}

这将使滚动条只显示为覆盖，从而不影响元素的宽度 !

小开

可能

html {
width: 100vw;
}

正是你想要的。

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

300px是对话框窗口宽度的一半。

这是唯一对我有效的方法。

小开

对于具有固定宽度的容器，纯CSS跨浏览器解决方案可以通过将容器包装到另一个div中并对两个div应用相同的宽度来实现。

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

< a href = " https://codepen。io/anon/pen/XEyLrY" rel="noreferrer">点击这里查看关于Codepen的示例

小开

我在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;
}
小开

我用这种方法解决了滚动条的类似问题:

首先禁用垂直滚动条设置它的:

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，而body没有滚动条。

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

也适用于默认滚动条。 可以添加:< / p > 

overflow-x: hidden;

以确保水平滚动条对父帧保持隐藏。除非你的客户希望你这么做。

小开

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已弃用。

下面是一个代码依赖，用于澄清不同的可能性

小开

如果你有一些容器，你正在使用作为包装你的网站内容，比如导航和页脚，你可以添加以下内容:

min-height: 101vh;

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

小开

在Chrome和Edge上遇到了同样的问题，滚动条的额外宽度(不是在FireFox上)。

项目中的逻辑是在悬停在某个容器上后停止滚动。所以我在body中添加了一个类:

    body.no-scrolling {
overflow: hidden;
}

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

所以，一个对我有效的解决方案:

    html{
width: 100vw;
}

该规则阻止内容在滚动条消失后立即移动，但增加了额外的宽度，并在页面底部显示滚动条。为了隐藏额外的宽度，我添加了:

     body{
overflow-x: hidden;
}

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

小开

我的头部导航也有类似的问题。我的大多数页面都有足够的内容来触发滚动，除了一页。

我的头部导航有一个flexContainer，有2个子容器(中间有空格)。flexContainer有一个5rem剩余&正确的填充。

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

将此添加到标题中，通过添加滚动条来集中内容 向左的宽度。元素现在居中，但我们有 根据滚动条宽度有效地缩小标题宽度

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

我添加回滚动条宽度减少 flexContainer填充。< / p >

这确保我的内容保持在适当的位置，无论是否触发滚动。


提交答案