通过原生js实现鼠标滚轮控制滚动条

鼠标滚轮控制内容滚动

因为任务需求故查询并参考了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元素的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。