当另一个元素滚动时，动态滚动另一个元素

Question

我有一个奇怪的情况。看看这张图片：

我在顶部有那个标尺。当我垂直滚动内容时，我不希望它滚动，所以我将它放在滚动容器之外。但现在它也不会水平滚动。当滚动内容时，我需要与内容容器的滚动条水平滚动。

我该如何做到这一点？

Answer 1

这个简单的javascript函数会获取.scrollLeft的{​​{1}}值并在#content #ruler

上重现它

jsfiddle

＆＃13;

＆＃13;

.scrollLeft

＆＃13;

document.getElementById("content").addEventListener("scroll", myFunction);

function myFunction() {

var elmnt = document.getElementById("content");
var elmnt2 = document.getElementById("ruler");

elmnt2.scrollLeft = elmnt.scrollLeft;

}

＆＃13;

#ruler {
  background: skyblue;
  overflow: hidden;
  width: 100%;
}

#content {  
  height: 100px;
  overflow: scroll;
  background: plum;
}

＆＃13;

＆＃13;

＆＃13;