我有一个小问题,试图保持我的。html页面在Chrome上的宽度一致。

例如,我有一个页面(1),其中有很多内容超出了视口的高度,因此该页面(1)上有一个垂直滚动条。在页面(2)上,我有相同的布局(菜单,div,…等),但内容更少,所以没有垂直滚动条。

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

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


你所需要做的就是添加:

html {
    overflow-y: scroll;
}

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

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


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

使用右填充将减轻滚动条的突然出现

例子

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


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

就像这样:

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/


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

但基本上你需要做的,也是它动态尝试做的,是将内容的宽度设置为略小于父滚动窗格的宽度。 因此,当滚动条出现时,它对内容没有影响。

这个例子展示了一种更hack的方式来实现这个目标,通过硬编码宽度,而不是试图让浏览器通过填充来为我们做。 如果这是可行的,这是最简单的解决方案,如果你不想要一个永久的滚动条。


我发现我可以做加法

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

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


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

试着用overflow-y: overlay代替。


免责声明:覆盖已弃用。 你仍然可以使用它,如果你绝对必须,但尽量不要这样做。

这只适用于WebKit浏览器,但我非常喜欢它。 将在其他浏览器中表现为auto。

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

点击这里查看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 );
}

工作与默认滚动条以及。 可以添加:

overflow-x: hidden;

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


2021年的解决方案是使用scrollbar-gutter,它将滚动条使用的空间永久地添加到元素中。

Use

.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:不建议使用覆盖。

下面是一个代码依赖,用于澄清不同的可能性:https://codepen.io/waxolunist/pen/ExweBMz


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

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左右填充。

头{padding-left: calc(100vw - 100%;)} 通过添加滚动条,将其添加到头部,从而使内容处于中心位置 向左的宽度。元素现在居中,但我们有 有效地缩小页眉宽度滚动条宽度。

flexContainer {padding: 0rem calc(5rem - calc((100vw - 100%)/2));} 我添加回滚动条宽度减少 flexContainer填充。

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


我也遇到过类似的问题。我试着在鼠标悬停时滚动,但它一直在推东西,导致糟糕的用户体验。我找到了一个简单的解决办法。我保持滚动条在它的位置,但使它透明,当光标悬停在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样式的box-sizing中设置boxSizing: 'border-box"不起作用

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