每个滚动同步元素仅显示一个滚动条

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每个滚动同步元素仅显示一个滚动条相关的知识，希望对你有一定的参考价值。

我正在制作一个网页，允许用户并排比较两个数据表。这些表彼此滚动同步，因此滚动一个表也滚动另一个表。尽管列和行的数量是动态的，但两个表的数量始终相等。

我一直遇到的唯一“问题”是，在每个表格中，水平轴和垂直轴都显示一个滚动条。由于表格无法独立滚动，因此每个轴只能滚动一个页面更有意义。垂直滚动条应显示在父元素的右侧，水平滚动条应显示在父元素的底部，并沿整个长度连续（在两个表下）。

我能够想到的唯一可能实现此效果的方法是，将两个表都设置为绝对/固定位置，测量表中的溢出量，并在使用隐藏元素的父级，然后将父级的滚动同步到两个表。但是，这似乎是解决这个问题的一种过分/愚蠢的方法。

供参考，我整理了一个小提琴here

这是desired result的图像

function init() {
  let isScrollSyncing = false;
  let table1 = document.querySelector('#table1');
  let table2 = document.querySelector('#table2');

  let scrollListener = (target, src) => {
    if (!isScrollSyncing) {
      isScrollSyncing = true;
      target.scrollTop = src.scrollTop;
      target.scrollLeft = src.scrollLeft;
    } else {
      isScrollSyncing = false;
    }
  };

  table1.addEventListener('scroll', () => {
    scrollListener(table2, table1);
  });
  table2.addEventListener('scroll', () => {
    scrollListener(table1, table2);
  });
}

init();
#compareTables {
  display: flex;
  position: relative;
  flex-direction: row;
  width: 500px;
  height: 250px;
}

.table {
  display: grid;
  position: relative;
  overflow: auto;
  grid-gap: 1px;
  grid-template-columns: repeat(4, 100px);
}

#table1 .cell {
  background: grey;
}

.cell {
  display: flex;
  position: relative;
  background-color: white;
  height: 20px;
  box-shadow: 0 0 0 1px black;
  justify-content: center;
  align-items: center;
}
<div id='compareTables'>
  <div id='table1' class='table'>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
  </div>
  <div id='table2' class='table'>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
  </div>
</div>

任何建议将不胜感激。

答案

如果我正确理解了您的要求，这是什么意思？

为了清楚起见，在full screen中查看。

function init() {
  let isScrollSyncing = false;
  let table1 = document.querySelector('#table1');
  let table2 = document.querySelector('#table2');

  let scrollListener = (target, src) => {
    if (!isScrollSyncing) {
      isScrollSyncing = true;
      target.scrollTop = src.scrollTop;
      target.scrollLeft = src.scrollLeft;
    } else {
      isScrollSyncing = false;
    }
  };

  table1.addEventListener('scroll', () => {
    scrollListener(table2, table1);
  });
  table2.addEventListener('scroll', () => {
    scrollListener(table1, table2);
  });
}

init();
#compareTables {
  display: flex;
  position: relative;
  flex-direction: row;
  width: 600px;
  height: 250px;
  overflow: scroll;
  border: 1px solid red;
}

#table1 {
  width: auto;
}

#table2 {
  width: auto;
  padding-left: 15px;
}

.table {
  display: grid;
  position: relative;
  grid-gap: 1px;
  grid-template-columns: repeat(4, 100px);
}

#table1 .cell {
  background: grey;
}

.cell {
  display: flex;
  position: relative;
  background-color: white;
  height: 20px;
  box-shadow: 0 0 0 1px black;
  justify-content: center;
  align-items: center;
}
<div id='compareTables'>
  <div id='table1' class='table'>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</
以上是关于每个滚动同步元素仅显示一个滚动条的主要内容，如果未能解决你的问题，请参考以下文章
 

 音频处理Melodyne 网络缩放功能 ( 音符分离线 | 片段分离线 | 窗口滚动条 | 网格缩放 | 修改图像显示位置 | 显示五线谱 )


 粘滞列表不显示滚动条


 Actionscript 3 - 如何删除菜单栏、滚动条以仅显示空白弹出窗口？


 jquery如何获取元素的滚动条高度等实现代码


 即使我不滚动，我也可以在 iPad 上显示滚动条吗？


 winform 控件过多，结果滚动条拖动速度变慢，请问怎么解决？