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

2020-08-06  本文已影响0人  RickGiser

鼠标滚轮控制内容滚动

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

上一篇下一篇

猜你喜欢

热点阅读