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

2021/10/20 11:10:21

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


扫一扫关注最新编程教程