> 有时页面内容过多时会同时出现横向和纵向滚动条, 鼠标拖动滚动条感觉操作有些繁琐, 所以尝试直接拖动dom来实现拖动滚动条同样的效果 - dom结构如下 ```html ...

``` ## 那么首先理清思路 - 同时监听父节点的mousedown事件和mousemove事件 - 当按下和移动同时触发时, 计算X和Y移动的距离 - 将移动的距离应用到滚动条上 ## 那么, 上代码! ### 1. 获取父元素节点 ```js let father = document.querySelector('.father'); ``` ### 2. 定义需要用到的变量 ```js // 判断鼠标是否按下 let isMouseDown = false; // 记录Y轴滚动距离 let scrollTop = 0; // 记录X轴滚动距离 let scrollLeft = 0; // 记录鼠标落点X坐标 let startX = 0; // 记录鼠标落点Y坐标 let startY = 0; ``` ### 3. 监听鼠标按下事件 ``` father.addEventListener('mousedown', e => { // 修改按下状态 isMouseDown = true; // 记录按下鼠标的位置, 用于计算鼠标的移动距离 startX = e.offsetX; startY = e.offsetY; }); ``` ### 4. 监听鼠标移动事件 ```js father.addEventListener('mousemove', e => { // 判断鼠标移动时是否处于按下状态 if (isMouseDown) { // 获取鼠标按下后移动的距离 let offsetX = e.offsetX - startX; let offsetY = e.offsetY - startY; // PS: 需要注意的是当鼠标向上移动时, 滚动条应该向下移动, 所以这里都是减去的移动距离 scrollTop = scrollTop - offsetY; scrollLeft = scrollLeft - offsetX; // TODO // 将计算后的距离赋值给滚动条 father.scrollTop = scrollTop; father.scrollLeft = scrollLeft; } } ``` ### 5. 当鼠标抬起时修改状态 ```js father.addEventListener('mouseup', () => { isMouseDown = false; }) ``` >但是当我们使用时很快会发现一个问题, 就是当滚动条滑块移动到端点时, 计算距离依然会继续累加, 导致的结果就是, 当累加距离超过极限时, 向反向移动鼠标,滑块不会立即移动. 所以对上述代码进行修改 ### PS1: Step2中添加计算极限距离的变量 ```js // 横向可移动的最大距离 let limitX = father.scrollWidth - father.offsetWidth; // 纵向可移动的最大距离 let limitY = father.scrollHeight - father.offsetHeight; ``` ### PS2: Step4中添加判断 ```js ... // TODO if (scrollTop >= limitY) { // 当滑块移动到底端时 scrollTop = limitY; } else if (scrollTop <= 0) { // 当滑块移动到顶端时 scrollTop = 0; } if (scrollLeft >= limitX) { // 当滑块移动到左侧时 scrollLeft = limitX; } else if (scrollLeft <= 0) { // 当滑块移动到右侧时 scrollLeft = 0; } ... ```