javascript - dom 元素上的滚动冲突

Question

我的演示中有两个 div，我想滚动不同的 div，但不能同时滚动两个。

我已经写了console.log('left');和 console.log('左'); 。 当我只需要向左滚动或向右滚动时，这似乎是冲突。

我得到了 hsz 的答复，但我的问题似乎很难澄清:(

// console:left
        document.getElementById('body').onscroll = function (e) {
            document.getElementById('num').scrollTop = document.get`enter code here`ElementById('body').scrollTop;
            console.log('left');

        }


// console:right
        document.getElementById('num').onscroll = function (e) {
            document.getElementById('body').scrollTop = document.getElementById('num').scrollTop;
            console.log('right');

        }

https://codepen.io/AsheLi/pen/djexyE?editors=1111

Answer 1

您必须引入一个标志来指定初始化滚动的内容 - 有机滚动(用户完成的当前滚动)或第二个 div:

let organicScrolling = true;

// console:left
document.getElementById('body').onscroll = function(e) {
  if (organicScrolling) {
    document.getElementById('num').scrollTop = document.getElementById('body').scrollTop;
    console.log('left');
  }
  organicScrolling = !organicScrolling;
};

// console:right
document.getElementById('num').onscroll = function(e) {
  if (organicScrolling) {
    document.getElementById('body').scrollTop = document.getElementById('num').scrollTop;
    console.log('right');
  }
  organicScrolling = !organicScrolling;
};

demo