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

本文主要是介绍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+JavaScript实现鼠标滑轮滑动控制元素横向滚动的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！