滑动鼠标滑轮，内容左右滚动

最新推荐文章于 2024-05-29 15:53:40 发布

Wild～～

最新推荐文章于 2024-05-29 15:53:40 发布

阅读量372

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/xiao970615/article/details/137145029

版权

本文详细介绍了如何使用HTML、CSS和JavaScript创建一个带有动态滚动条的元素列表。通过JavaScript处理鼠标滚轮事件，实现列表元素在X轴上的滚动。当用户滚动时，元素会按照预设的步长进行平滑滚动。

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

html

<div class="roll" id="x-roll">
    <div class="roll-item" v-for="(item,index) in list" :key=""> </div>
</div>

css

.roll{
    overflow-x: auto;  // x轴超出就显示滚动条
    display: -webkit-box;  // 跟flex布局差不多
}

.roll-item{
    width: 500px;
}

js代码

// 初始化与绑定监听事件方法
  function scrollInit() {
    // 获取要绑定事件的元素
    const nav = document.getElementById("x-roll")
    // document.addEventListener('DOMMouseScroll', handler, false)
    // 添加滚轮滚动监听事件，一般是用下面的方法，上面的是火狐的写法
    nav.addEventListener('mousewheel', handler, false)
    // 滚动事件的出来函数
    function handler(event) {
      // 获取滚动方向
      const detail = event.wheelDelta || event.detail;
      // 定义滚动方向，其实也可以在赋值的时候写
      const moveForwardStep = 1;
      const moveBackStep = -1;
      // 定义滚动距离
      let step = 0;
      // 判断滚动方向,这里的100可以改，代表滚动幅度，也就是说滚动幅度是自定义的
      if (detail < 0) {
        step = moveForwardStep * 100;
      } else {
        step = moveBackStep * 100;
      }
      // 对需要滚动的元素进行滚动操作
      nav.scrollLeft += step;
    }
  }

加载页面的时候执行一次scrollInit监听事件就可以了