我有一个问题,滚动条附加到
content-box
而不是 window
。 content-box
不是 window
的全宽,这使得中间的滚动条很尴尬。如何将滚动条移动到window
?
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div class="container">
<div class="header">Title</div>
<div id="content-box" tabindex="0">
<div class="content">content</div>
<div class="content">content</div>
...
<div class="content">content</div>
</div>
</div>
</body>
</html>
.container {
display: flex;
max-height: 100vh;
}
#content-box {
overflow-y: scroll;
margin: 0 auto;
}
overflow-y: scroll
就是问题所在。我们需要删除它并将滚动设置到外部 div 或 body。
如果是较大工作代码主体的一部分,这可能会导致其他问题,但将所有相关引用从
content-box
映射到 body
应该会有所帮助
body {
overflow: auto;
}
这将使滚动条出现在窗口上而不是内容框上。