在我的网站中，我有两个主要的 div - 一个用于顶部的横幅，一个用于主要内容。它们都包含内部元素，如 imgs、iframes 等，但我认为这对我的问题并不重要，即:如何制作滚动条主要内容不与横幅重叠？
如果有帮助，您可以查看我的 actual website 的源代码在 my github .但是为了节省查找时间，我在 html 中写了一个小片段来演示这个问题:
document.getElementById("someText").innerText = "this is some content ".replace(/ /g, '\n').repeat(15);html, body {
margin: 0;
padding: 0;
}
#header {
position: fixed;
background-color: teal;
z-index: 1;
top: 0;
height: 100px;
width: 100%;
}
#main {
postion: absolute;
top: 100px;
}<body>
<div id="header">
header
</div>
<div id="main">
<pre id="someText"></pre>
</div>
</body>可能很难看到，在 SO 的代码片段中，右侧的 滚动条 与横幅重叠，我想要的是让它停止当它到达横幅时。
我已经尝试(在 CSS 中)将正文的 overflow 设置为 hidden 因为这是 滚动条 与横幅重叠，但这只是将其完全删除，所以我无法滚动 - 显然不是我要找的...
我也试过将 main div 的 overflow-y 设置为 scroll，但这确实无法正常工作，因为 bar 确实出现在我想要的位置，但它是灰色，因此无法使用。
最佳答案
我已经为你创建了一个 fiddle : https://jsfiddle.net/3gvowvag/1/
您的 HTML 和 JS 保持不变。对于您的 CSS:
html, body {
margin: 0;
padding: 0;
overflow-y: hidden;
}
#header {
position: fixed;
background-color: teal;
z-index: 1;
top: 0;
height: 100px;
width: 100%;
}
#main {
position: absolute;
top: 100px;
max-height: 100%;
width: 100%
overflow-y: scroll;
}
所以这些变化基本上是给你的 html, body 一个 overflow-y: hidden 和你的 #main 一个 max - 和100% 的高度宽度 以及overflow-y: scroll。
这基本上可以满足您的需求 - 尽管我对设置这样的页面没有 100% 的信心。通过像素进行绝对定位和偏移有点老套，还将 html/body 的 overflow-y 设置为隐藏，不确定这些东西从长远来看会如何表现。但如果没有进一步的背景，很难完全想到这一点。
附言:很棒的猫!
关于html - 设置滚动条的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45879359/