javascript - js滚动条之间联动

Question

<style>
.scrollcontainer,.demo{
    height: 842px;
    width: 300px;
    position: absolute;
    overflow-y:auto;
    background-color: red; 
}
.scrollbasis,.demobasis{
    height: 1001px;
    width: 3px;
}
.demo{
    left: 500px;
}
</style>
<p class="scrollcontainer">
    <p class="scrollbasis"></p>
</p>
<p class="demo">
    <p class="demobasis"></p>
</p>
<script>
$(".demo").scroll(function(){
        var domsctop=$(".demo").scrollTop();
    $(".scrollcontainer").scrollTop(domsctop);
});
$(".scrollcontainer").scroll(function(){
    var scdomsctop=$(".scrollcontainer").scrollTop();
    $(".demo").scrollTop(scdomsctop);
});
</script>

---

如上，为了实现两个p的滚动条联动，但是如果这么写会出现死循环。求大神给个解决方案。

Answer 1

给你提供一个想法。就是当，你触发的时候，做一个标记，等这个标记解除之后100秒，触发标记的这个滚动条，才会继续监听动作

Answer 2

你这代码复杂化了，其实可以如下。原理是两个滚动其实是一个对象，那么绑定触发后，必然会同步，且又是自身。

html

 <p class="a demo"></p> <p class="b demo"></p>

css

.a, .b{       height: 300px;
    width: 300px;
    position: absolute;
    overflow-y:auto;
    background-color: red;  }
.b {     left:500px; }

js

$(".demo").scroll(function(){
    $(".demo").scrollTop($(this).scrollTop()); 
});