使用鼠标滚轮实现网页横向滚动

最新推荐文章于 2024-07-31 16:50:40 发布

Lmx!

最新推荐文章于 2024-07-31 16:50:40 发布

阅读量1.8k

点赞数

分类专栏： js代码段文章标签： javascript html5 vue

本文链接：https://blog.csdn.net/hskjshs/article/details/121669252

版权

js代码段专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该代码段定义了一个名为tabelScorll的函数，用于监听表格body的鼠标滚轮事件。当鼠标悬停在表格上时，获取表格的左偏移量。如果滚轮向上滚动，步长增加100，否则减少100。根据滚动方向更新步长，并限制其范围，然后使用scrollTo方法更新表格的滚动位置。此功能适用于实现自定义的表格滚动效果。

摘要由CSDN通过智能技术生成

function tabelScorll(step){
  let leftPosition = 0
  let tableBody = document.getElementById('table_body')
  tableBody.addEventListener('mouseover', ()=>{
    leftPosition = tableBody.childNodes[2].scrollLeft
  })
  tableBody.addEventListener('mousewheel', (e)=>{
    leftPosition = tableBody.childNodes[2].scrollLeft
    if(e.deltaY >= 0){
      step += 100
      if (step <= leftPosition + 150){
        e.preventDefault()
      }else {
        step = leftPosition + 10
      }
    }else {
      step -= 100
      if (step >= 0){
        e.preventDefault()
      }else {
        step = 0
      }
    }
    tableBody.childNodes[2].scrollTo(step, 0)
  }, { passive: false })
}