页面所有元素scrollbar无法正常工作，如何实现单滚动条控制全页？

问题描述 #

我有一个包含多个元素的页面，想让单个滚动条控制所有元素，但滚动条始终无法驱动元素跟随滚动。已将元素尺寸设置在滚动区域内，但滚动时元素完全不动。试过在style、body里加滚动相关代码，只对头部生效；还试过javascript: scrollbars.visible=true，也没用。

核心原因 #

你的所有元素都用了position:fixed定位——这种定位是相对于浏览器视口的，不管页面怎么滚动，元素都会固定在视口的某个位置，自然不会随页面滚动条移动。

解决方案 #

不需要JavaScript，纯CSS就能解决：

• 把所有元素的position:fixed改成position:absolute
• 给父容器（这里直接用body）设置position:relative，让absolute定位的元素相对于body（而非视口）定位
• 保持body的height、width和overflow:auto设置，确保滚动区域正常生效

修改后的代码示例 #

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
body{
  position: relative; /* 添加相对定位，作为absolute元素的参照 */
}
</style>
</head>
<body style="height: 3000px; width: 3000px; border: 1px solid; overflow: auto;">

    <div id="Line1Main" style="position:absolute; top: 290px; left: 25px; width: 2000px; height: 1px; transform: rotate(0deg); border-bottom: 1px solid black;"></div>
    <div id="Line1Main1" style="position:absolute; top: 270px; left: 25px; width: 2000px; height: 1px; transform: rotate(0deg); border-bottom: 1px solid black;"></div>
    <div id="Line1Main2" style="position:absolute; top: 250px; left: 25px; width: 2000px; height: 1px; transform: rotate(0deg); border-bottom: 1px solid black;"></div>

    <div id="Line1Main3" style="position:absolute; top: 1030px; left: 30px; width: 2000px; height: 1px; transform: rotate(90deg); border-bottom: 1px solid black;"></div>
    <div id="Line1Main4" style="position:absolute; top: 1030px; left: 60px; width: 2000px; height: 1px; transform: rotate(90deg); border-bottom: 1px solid black;"></div>
    <div id="Line1Main5" style="position:absolute; top: 1030px; left: 90px; width: 2000px; height: 1px; transform: rotate(90deg); border-bottom: 1px solid black;"></div>

    <script>
    
    </script>
</body>
</html>

注：顺便修正了重复的ID——HTML里ID必须唯一，重复ID会导致后续JS操作或样式选择出问题

内容的提问来源于stack exchange，提问作者user112307