容器同步滚动

(function leftRightSyncScoll(){
  //获取DOM
  let left = document.getElementById('left')
  let right = document.getElementById('right')
 
  // 绑定左右滚动事件
  function bindLeft(){
    removeRight()
    left.addEventListener('scroll',scrollLeft)
  }
  function bindRight(){
    removeLeft()
    right.addEventListener('scroll',scrollRight)
  }
  // 移除左右绑定事件
  function removeLeft(){
    left.removeEventListener('scroll',scrollLeft)
  }
  function removeRight(){
    right.removeEventListener('scroll',scrollRight)
  }
  // 左右滚动执行设置scrollTop
  function scrollLeft(){
    let lst = left.scrollTop
    right.scrollTop = lst
  }
  function scrollRight(){
    let rst = right.scrollTop
    left.scrollTop = rst
  }
  //左右添加滚动事件
  left.addEventListener('mouseover', bindLeft)
  right.addEventListener('mouseover',bindRight)
})()
posted @ 2020-05-26 15:24  671_MrSix  阅读(109)  评论(0编辑  收藏  举报