Vue+JavaScript实现鼠标滑轮滑动控制元素横向滚动

实现列表跟随鼠标滑轮滑动横向滚动

第一步：父元素设置为  overflow-x: scroll（竖向同理）

.scroll-box{
    width: 1000px;
    overflow-x: scroll;
}

第二步：添加鼠标滑轮监听事件

<div ref="scrollBox" @mousewheel="handleScroll" class="scroll-box">
    <div>你的内容</div>
</div>

第三步：添加滑轮事件处理

handleScroll(e) {
    var scrollNum = this.$refs.scrollBox;
    //deltaY属性在向下滚动时返回正值，向上滚动时返回负值，否则为0
    scrollNum.scrollLeft = scrollNum.scrollLeft + e.deltaY;
},

标签：Vue,滚动,鼠标,deltaY,JavaScript,scrollNum,scroll,滑轮
来源： https://blog.csdn.net/qq_43862878/article/details/120859851