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实现鼠标滑轮滑动控制元素横向滚动的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-16基于Java+Springboot+Vue开发的体育用品商城管理系统
- 2024-09-16基于Java+Springboot+Vue开发的口腔牙科诊所预约管理系统
- 2024-09-16如何基于Java解析国密数字证书
- 2024-09-15Spring Boot项目开发教程:快速入门与实战指南
- 2024-09-15单点登录实战:入门级指南与实操详解
- 2024-09-15登录校验实战:从零构建安全登录系统
- 2024-09-15Java知识库系统学习:从零开始的编程之旅
- 2024-09-15JAVA知识库系统学习:从零基础到入门的全面指南
- 2024-09-15Java主流技术学习:从入门到进阶的实用指南
- 2024-09-15JAVA主流技术学习:从入门到提升