让两个 div 共享同一个滚动条？

Posted 2023-03-04

【中文标题】让两个 div 共享同一个滚动条？

【英文标题】：Make two divs share the same scrollbar?

【发布时间】：2011-11-14 11:38:36

【问题描述】：

给定两个 div，它们代表嵌入在更大 div 中的列。如果 "!stuff" html 代表了许多超过容器高度的数据行，我该如何设置它使两个 col div 溢出并从 "container" 共享一个滚动条？

。容器 高度：100%； 宽度：100%； 溢出-x：隐藏； 溢出-y：滚动； 位置：相对； 底部填充：30px； .col1 高度：100%； 宽度：50%； 溢出-x：隐藏； 溢出-y：可见； 位置：相对； 向左飘浮; .col2 高度：100%； 宽度：50%； 溢出-x：隐藏； 溢出-y：可见； 位置：相对； 浮动：对；

<div class="container">
  <div class="col1">
    !Stuff<br/>
  </div>

  <div class="col2">
    !Stuff
  </div>
</div>

【参考方案1】：

您需要为容器设置一个固定的高度，否则它将自动调整大小以使列 div 适合其中。 overflow 属性应该只为容器设置，因为它是唯一可以滚动的元素：

.container 
    height: 300px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    padding-bottom: 30px;   


.col1 
    height: 100%;
    width: 50%;
    position: relative;
    float: left;


.col2 
    height: 100%;
    width: 50%;
    position: relative;
    float: right;

【参考方案2】：

HTML

<div class="col2"  onscroll="OnScroll(this)">!Stuff</div>

javascript函数

function OnScroll(div) 
var div1 = document.getElementById("col1");
div1.scrollTop = div.scrollTop;