如何让窗口可以滚动而不是div?

问题描述 投票:0回答:2

我有一个问题,滚动条附加到

content-box
而不是
window
content-box
不是
window
的全宽,这使得中间的滚动条很尴尬。如何将滚动条移动到
window

JSFiddle 示例

<!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;
}
javascript html css scroll scrollbar
2个回答
0
投票

overflow-y: scroll
就是问题所在。我们需要删除它并将滚动设置到外部 div 或 body。

如果是较大工作代码主体的一部分,这可能会导致其他问题,但将所有相关引用从

content-box
映射到
body
应该会有所帮助


-2
投票
body {
  overflow: auto;
}

这将使滚动条出现在窗口上而不是内容框上。

© www.soinside.com 2019 - 2024. All rights reserved.