浏览器滚动条在我的固定 div 下面

这是因为 base.css 中的 overflow-x: hidden;行号为9

body {
color: #444444;
font: 13px/20px Arial,Helvetica,sans-serif;
overflow-x: hidden; // remove this
}

这可以通过增加阀体溢流来解决

来自

overflow:auto;

到

overflow:auto;
overflow:initial;

这是你的问题

如果你的滚动是在主体上设置的，如果它的结构是主体 > 包装 > 标题(固定位置) ，内容等等

下面是你的解决方案

解决问题的办法

注意: 这只能在主体上工作，而不能在带滚动条的 div 容器上工作。您也可以使用 z-index 来使它工作，但是您需要指定 z-index 来堆栈其他元素，以使它正确工作。

希望这对你有帮助... :)

一个 css 黑客(我终于找到了一种方法) ，没有太多的解释迅速-第一个浮动的元素是。 我认为从下面的代码中理解原理是如何工作的。

更新: 移动浏览器有一个问题，请看下面来评估你是否接受它。

<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 200px;background: #f00;">


<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd


<div style="width: 100%;height: 20px;background: #5ff"></div>


</div>

最后的代码，与您希望看到的可见和工作的内容几乎相同

<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 0px;overflow:visible;background: #f00;">


<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;visibility:hidden;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd


<div style="width: 100%;height: 20px;background: #5ff"></div>


</div>

重要的是，它适用于移动和桌面浏览器。事实上，当我在 windows edge 上测试移动设备时，我的电脑切换到了平板模式，然后是桌面模式。代码一直在工作。 要检查是否可以使用: before 代替 div id = “ aaaa”来使其更加 css 纯粹和附加 div 独立。

更新: 边缘浏览器在进入平板电脑模式时不会改变滚动条。

如果在 bbbb 元素中遇到隐藏内容的问题，请尝试不要在 bbbb 容器中放置绝对/固定元素。

我还没有对所有情况和浏览器进行测试。

更新: 提到的问题位于这个答案的顶部——然而在移动浏览器上，滚动条是动态的，所以它被覆盖了——只有当你的滚动条显示出来，而且你知道它不是任何容器的一部分时，它才会出现。在所有浏览器上，滚动条可能都很薄，所以您应该决定如何使用它。大概5像素左右的边距？

我有这个问题，我的滚动条是在我的固定标题，我解决了这个问题后，我删除了我的 html 标签 height: 100%;和我添加了其他属性，以确保我有相同的结果。其他的解决办法都没有帮到我。我希望这能帮到别人。

问题不在于主体标签上的 overflow-x。这是因为 html标签上的 overflow-x和 overflow-y。一旦我从 HTML 标记中删除了它，我就可以把任何我想要的溢出放在我的身体上。

这种情况发生在:

• overflow-x设置为 auto、 hidden、 overflow或 scroll
• overflow-y设置为 auto、 hidden、 -webkit-paged-x或 -webkit-paged-y

它不必是对 overflow-x或 overflow-y的显式调用，因为 overflow同时设置了它们。

我在 Chrome 67上使用 Windows 10。

反应应用程序也有同样的问题。

将 overflow-y: scroll风格从 #root移到 body选择器。它为我解决了问题。

这可以通过以下两种方法解决:

1. 首先计算 scrollbarWidth=el.offsetWidth - el.clientWidth

设定固定 div left=scrollbarWidth

在容器上设置 z-index，该容器是标题和内容的父级。

删除 html 标记中的 height:100%

把 margin-right: 0px;放到 topNavBar 就行了

我解决这个问题的方法是设置一个滚动条的宽度，然后设置一个100% 的宽度为导航条减去滚动条的宽度。

像这样:

.main-container::-webkit-scrollbar {
width: 8px;
}


.navbar{
display: flex;
position: fixed;
width: calc(100% - 8px);
height: 8rem;
z-index: 5000;
}

看起来是这样的

剪辑路径 属性可以帮助您。

你需要把你的标题内的滚动内容，但是这并不重要，因为它有一个固定的位置。然后，如果你应用 clip-path: inset(0 0 0 0);到容器，它将剪切出这个矩形之外的所有东西。

function toggle() {
content.classList.toggle('clip');
}

#container {
overflow-y: auto;
width: 300px;
height: 100px;
padding: 0;
}
#fixed {
position: fixed;
left: 0;
top: 0;
width: 350px;
height: 50px;
background: blue;
}
#content {
height: 1000px;
width: 100%;
background: yellow;
}
#content.clip {
clip-path: inset(0 0 0 0);
}

<div id="container">
<div id="content">
<div id="fixed"></div>
</div>
</div>
<button onclick="toggle()">toggle clip-path</button>