代码之家 › 专栏 › 技术社区 › Kay

两个滚动同步的div包含一个图像-如何防止事件适得其反?

html javascript

Kay · 技术社区 · 6 年前

var display1 = document.getElementById("display1");
var display2 = document.getElementById("display2");

function onScroll_1(event) {
  var display1 = document.getElementById("display1");
  var display2 = document.getElementById("display2");

  display2.scrollLeft = display1.scrollLeft;
  display2.scrollTop = display1.scrollTop;
}

function onScroll_2(event) {
  var display1 = document.getElementById("display1");
  var display2 = document.getElementById("display2");

  display1.scrollLeft = display2.scrollLeft;
  display1.scrollTop = display2.scrollTop;
}

#wrapper {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

#display1, #display2 {
  height: 200px;
  width: 42%;
  padding: 10px;
  border-radius: 5px;
  background: #ddd;
  margin-bottom: 10px;
  overflow-y: scroll; 
}

<div id="wrapper">
  <div id="display1" onscroll="onScroll_1(event)">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>

  <div id="display2" onscroll="onScroll_2(event)">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

用户可以使用滚动条、拖动和其他方式滚动内容。

问题是一个事件导致循环中的另一个事件,因此有时滚动时结果非常不稳定。

我想我需要停止事件触发,但我所有的尝试都没有成功。

我尝试在处理程序的开头使用removeEventListener并将其添加回处理程序的末尾,

function onScroll_1()
{
    display2.removeEventListener("scroll",onScroll_2);

    display2.scrollLeft = display1.scrollLeft;
    display2.scrollTop = display1.scrollTop;

    display2.addEventListener("scroll",onScroll_2);
}
function onScroll_2()
{
    display1.removeEventListener("scroll",onScroll_1);    

    display1.scrollLeft = display2.scrollLeft;
    display1.scrollTop = display2.scrollTop;

    display1.addEventListener("scroll",onScroll_1);
}

var lock1 = false;
var lock2 = false; 
function onScroll_1()
{
    lock2 = true;

    if(lock1 == false){
        display2.scrollLeft = display1.scrollLeft;
        display2.scrollTop = display1.scrollTop;
    }
    lock2 = false;

}
function onScroll_2()
{
    lock1 = true;

    if(lock2 == false){
        display1.scrollLeft = display2.scrollLeft;
        display1.scrollTop = display2.scrollTop;
    }
    lock1 = false;
}

我该如何阻止这个事件的回击?

0 回复 | 直到 6 年前