js实现 scorll 滚动条触底加载 ---及滚动条左右滑动触底事件触发

scorll 滚动条触底加载

    //获取dom
  let element = document.documentElement
  //  浏览器滚动滚动的高度
  let  scrollTop = element.scrollTop || document.body.scrollTop  
  // 浏览器当前视口的高度 
  let cilentHeight = element.clientHeight  
  //  浏览器滚动条总高度
  let scrollHeight = element.scrollHeight 
   if(Math.floor(scrollTop+clientHeight) >= scrollHeight  ) {
     // 执行要出发的事件
   }

左右滑动触底事件触发

  //  div 绑定 @scroll 监听欢动事件     **div前提有滚动状态
  <div class="scrollBox" @scroll="scrollEvent" /> 
   //调用滚动事件
scrollEvent()  {
         //获取滚动 盒子的dom
  let element = document.getElementsByClassName("scrollBox")[0]
         //  获取向左滚动的距离
      let scrollLeft = element.scrollLeft
       // 获取当前div的视口宽度
      let clientWidth = element.clientWidth
      // 获取滚动总宽
      let scrollWidth = element.scrollWidth
   }
   //
  if (Math.floor(scrollTop + clientWidth) > scrollWidth-200 ) {
     //向右滑动 触发事件
      } else if (Math.floor(scrollTop - clientWidth) === -clientWidth) {     
     //向左滑动 触发事件
      }


   }