最近項(xiàng)目做一個(gè)滾動(dòng)條隨另一個(gè)滾動(dòng)條等比例滾動(dòng)的東西，監(jiān)聽左邊的scroll事件就可以讓右邊等比例滾動(dòng)了，然而右邊滾動(dòng)時(shí)雖然也在滾動(dòng)，但是滾動(dòng)的特別慢；

通過(guò)控制條打印scrollTop可以看到開始左邊滾動(dòng)時(shí)scrollTop是一個(gè)等比增加的過(guò)程

r1.png

但是去移動(dòng)右邊的時(shí)候發(fā)現(xiàn)右邊增加的很慢!

r2.png

代碼如下：

      const r = document.querySelector('.right')
      // 左右兩邊監(jiān)聽鼠標(biāo)進(jìn)去移除事件
      l.addEventListener('mouseenter', lFn);
      l.addEventListener('mouseleave', lFn);
      r.addEventListener('mouseenter', rFn);
      r.addEventListener('mouseleave', rFn);

      // 事件 要移除
      function lFn() {
        l.addEventListener('scroll', function () {
          r.scrollTop = l.scrollTop * 1.5;
          console.log('l.scrollTop', l.scrollTop)
        });
        r.removeEventListener('scroll', function () {
          l.scrollTop = r.scrollTop / 1.5;
          console.log('r.scrollTop', r.scrollTop)
        });
      }

      function rFn() {
        r.addEventListener('scroll', function () {
          l.scrollTop = r.scrollTop / 1.5;
          console.log('r.scrollTop', r.scrollTop)
        });
        l.removeEventListener('scroll', function () {
          r.scrollTop = l.scrollTop * 1.5;
          console.log('l.scrollTop', l.scrollTop)
        });
      }

通過(guò)研究發(fā)現(xiàn)是移除事件的時(shí)候并沒(méi)有移除成功，但是看到removeEventListener里面與addEventListener是一樣的??？ 最后通過(guò)網(wǎng)上查閱發(fā)現(xiàn)了原因，雖然你寫的一樣，但是對(duì)于兩個(gè)監(jiān)聽事件來(lái)說(shuō)它們指向的內(nèi)存地址是不一樣的，這是兩個(gè)不同的函數(shù)；我們需要提前定義好函數(shù)，然后直接作為參數(shù)傳入進(jìn)行了；最終代碼如下：

      const l = document.querySelector('.left')
      const r = document.querySelector('.right')
      // 左右兩邊監(jiān)聽鼠標(biāo)進(jìn)去移除事件
      l.addEventListener('mouseenter', lFn);
      l.addEventListener('mouseleave', lFn);
      r.addEventListener('mouseenter', rFn);
      r.addEventListener('mouseleave', rFn);
      // 事件 要移除必須是同一個(gè)函數(shù) 不能用function(){}，要先定義好
      function lFn() {
        l.addEventListener('scroll', lTop);
        r.removeEventListener('scroll', rTop);
      }
      function rFn() {
        r.addEventListener('scroll', rTop);
        l.removeEventListener('scroll', lTop)
      }

      function lTop() {
        r.scrollTop = l.scrollTop * 1.5;
        console.log('l.scrollTop',l.scrollTop)
      }

      function rTop() {
        l.scrollTop = r.scrollTop / 1.5;
        console.log('r.scrollTop',r.scrollTop)
      }

參考：https://www.cnblogs.com/ToNi/archive/2015/04/07/4397669.html