Question

我有一个小问题，试图让我的.html网页在Chrome上保持一致的宽度，例如，我有一个页面（1），其中有很多内容溢出了视口（右词？）的高度，因此该页面上有一个垂直滚动条（1）。在页面（2）我有相同的布局（菜单，div，...等），但内容较少，所以没有垂直滚动条。

问题是在第（1）页上，滚动条似乎将元素略微向左推（加到宽度？），而所有内容都显示在第（2）页的中心

我仍然是HTML / CSS / JS的初学者，我相信这并不是那么困难，但我没有找到解决方案的运气。它确实在IE10和FireFox（非干扰滚动条）上工作，我只在Chrome上遇到过这种情况。

Answer 1

免责声明：重叠 已弃用。
如果你绝对必须，你仍然可以使用它，但尽量不要。

这仅适用于WebKit浏览器，但我非常喜欢它。在其他浏览器上的行为类似于auto。

.yourContent{
   overflow-y: overlay;
}

这会使滚动条仅显示为叠加，从而不会影响元素的宽度！

Answer 2

您需要做的就是添加：

html {
    overflow-y: scroll;
}

在你的css文件中，因为这将有滚动条是否需要它虽然你只是无法滚动

这意味着视口将具有相同的宽度

Answer 3

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

这样的事情：

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/

Answer 4

在计算宽度时，Safari和Chrome等Webkit浏览器会从可见页面宽度中减去滚动条宽度：100％或100vw。更多信息DM Rutherford's Scrolling and Page Width。

请尝试使用overflow-y: overlay。

Answer 5

可能

html {
    width: 100vw;
}

正是你想要的。

Answer 6

我发现我可以添加

"object4"

直接到我的CSS，它会使滚动条不可见，但仍允许我滚动（至少在Chrome上）。当您不希望页面上有令人分心的滚动条时，这很有用！

Answer 7

目前看来我的其他答案似乎并不正常（但我会继续尝试让它正常运作）。

但基本上你需要做什么，以及它试图动态做什么，将内容的宽度设置为略小于父，可滚动窗格的宽度。
因此，当滚动条出现时，它对内容没有影响。

此EXAMPLE通过对width进行硬编码而非尝试让浏览器通过padding为我们执行此操作，显示出实现该目标的更为苛刻的方法。
如果这是可行的，如果您不想要永久滚动条，这是最简单的解决方案。

Answer 8

对于具有固定宽度的容器，可以通过将容器包装到另一个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;
}

Click here to see an example on Codepen

Answer 9

_{编辑：此答案目前不太正确，请参阅我的其他答案，看看我在这里尝试做什么。我正在努力解决这个问题，但如果你能在评论中提供帮助，谢谢！}

使用padding-right可以缓解滚动条的突然出现

EXAMPLE

chrome devtools showing padding unmoved

正如您从点中看到的那样，无论是否存在滚动条，文本都会在换行前将其放到页面中的相同位置。
这是因为当引入滚动条时，填充隐藏在它后面，因此滚动条不会推动文本！

Answer 10

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

其中300 px是我的对话窗口宽度的一半。

这实际上是唯一对我有用的东西。

Answer 11

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

body {
    padding-left: 15px;
}

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

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

Answer 12

我无法为第一个答案添加评论，这已经很长时间了...但是该演示存在问题：

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

Answer 13

我用这种方式解决了我在滚动条上遇到的类似问题：

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

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

阻止滚动条添加到Chrome上的页面宽度

13 个答案: