因为任务需求故查询并参考了https://www.jianshu.com/p/32eb28c616ce实现了横向滚动的功能
在横向滚动的基础上又封装了竖直方向滚动，有需要的网友可以参考我所封装的功能，希望对大家有帮助
思路是通过监听鼠标滚动事件控制DOM元素移动，可以查找DOM元素的相关clientWidth、clientHeight、scrollWidth、scrollHeight的相关含义进行理解
以Y坐标为例
import { WheelDirectY } from "../WheelDirectY.js";//在文件中引入封装好的JS文件
const Ele=document.getElementById('ID');
new WheelDirectiveY(Ele);//此处是获取你需要进行滚动的内容的DOM也就是容器
//实例化这个类将获取到的DOM元素当做参数传入
class中的el就是用来接收实例化时传入的DOM元素的
鼠标滚轮控制内容滚动 因为任务需求故查询并参考了https://www.jianshu.com/p/32eb28c...
滚轮事件与函数节流 jquery.mousewheel插件使用jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮...
滚轮事件与函数节流 jquery.mousewheel插件使用jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮...
滚轮事件与函数节流 jquery.mousewheel插件使用jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮...
滚轮事件与函数节流jquery.mousewheel插件使用jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事...
整屏滚动： jquery.mousewheel插件使用 ： jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事...
整屏滚动： jquery.mousewheel插件使用 ： jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事...
整屏滚动： jquery.mousewheel插件使用 ： jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事...
整屏滚动： jquery.mousewheel插件使用 ： jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事...
整屏滚动： jquery.mousewheel插件使用 ： jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事...
本文标题：通过原生js实现鼠标滚轮控制滚动条
本文链接：https://www.haomeiwen.com/subject/jbtorktx.html
网友评论