使用 overflow-x:hidden 时 Firefox 中的两个垂直滚动条答案

【问题标题】：Two vertical scrollbars in Firefox when using overflow-x:hidden使用 overflow-x:hidden 时 Firefox 中的两个垂直滚动条
【发布时间】：2012-02-26 07:30:12
【问题描述】：

我刚刚为一个客户建立了一个网站，我遇到了一个奇怪的问题，只出现在 Firefox 浏览器中。

在页面顶部我有一个导航栏，它填充了浏览器的宽度。我已经使用这里描述的技术http://css-tricks.com/full-browser-width-bars/ 来尽可能地实现语义上的效果。然后我不得不在 html 和 body 标签上放置 overflow-x:hidden 以防止用户能够滚动到屏幕的右侧。

这在我从 Mac/PC 上的 Safari、Opera、Chrome 和天堂禁止的每个浏览器中测试过的所有浏览器中都非常有效，但即使是 IE7、8 和 9 也想玩得很好。但是哦，不，Firefox 就是不想跟上它。

虽然我没有想要的水平滚动条，但 Firefox 决定将垂直滚动条的数量增加一倍。如果使用鼠标，我无法水平滚动，但是当我在 Mac 上使用触控板时，垂直移动受到限制，这意味着我无法向下滚动页面，如果我用两根手指轻扫，页面会水平滚动到被遗忘的状态。

我在谷歌和其他地方发现的唯一一件事是这种行为是 Firefox 中的一个错误？

非常感谢任何有关此烦恼的帮助，非常感谢。

更新：添加代码

基本上代码是这样的，因为太多了。我会将您指向该站点，但客户不希望它生效。我们开始：

<nav id="menu">
    <ul>
        <li>Menu Item 1</li>
        <li>Menu Item 2</li>
        <li>Menu Item 3</li>
    </ul>
</nav>

那么css就是上面链接的全宽浏览器栏：

html,body{
    overflow-x: hidden; /*This prevents the user from scrolling horizontally*/
}

#menu{
    position: relative;
    background: blue;
}

#menu:before, #menu:after{
    content:'';
    position: absolute;
    background: inherit;
    top: 0;
    bottom: 0;
    width: 9999px; /*huge width to ensure bar fills browser*/
}

#menu:before{
    right: 100%;
}

#menu:after{
    left: 100%;
}

【问题讨论】：

标签： firefox css overflow scrollbars

【解决方案1】：

刚刚遇到了类似的问题；我的解决方案是简单地添加：

html, body {height:100%;}

这就解决了。只是想在这里发布它，因为它一直在搜索结果中弹出。

【讨论】：

这并没有为我解决。
这对我也没有解决 :(

【解决方案2】：

好的，我整理好了。与我更好的判断相反，我只是从网络上的任何旧站点复制并粘贴了一个 clearfix hack。经过数小时的故障排除后，我发现全宽条没有按预期工作的原因是 clearfix。我将其缩小到 clearfix hack 的 css 内容标签。由于某种原因，它有一个'。作为内容插入。我删除了这个然后添加了

* html .clearfix { height: 1%; }

到 clearfix css 块的末尾，它起作用了。 Firefox 中不再有水平滚动，也不再有 x2 垂直滚动条。

【讨论】：

把它放到 clearfix css 块中对我没有帮助。我删除了html { overflow-y: scroll;}，它修复了两个栏的问题，但我想知道删除它是否会导致其他问题？

【解决方案3】：

为我解决的问题是将滚动条代码仅移动到 html 而不是“body, html”。我想也许它正在制作两个滚动条，因为它同时放在了 html 和 body 中。尽管这引入了一些其他问题。我想我会用一个额外的 div 代替。

html {
    overflow-y: scroll;
    scrollbar-color: #2A9FD6 rgba(0,0,0,1);
    scrollbar-width: thin;
}
body, html {
}

【讨论】：