JS 鼠标拖动实现移动滚动条的滚动效果

效果

现在很多场景都以移动端为基本开发，比如说需要隐藏滚动条，在pc上实现鼠标拖动和手机触摸拖动差不多的效果。

实现

以mdn的overflow属性中范例为基础，内容溢出时候可使用overflow: auto;和overflow: scroll;实现滚动效果。
要实现鼠标拖动实现和移动滚动条一样的效果只需要在原例脚本部分添加如下内容：

<script>
const scrollElement = document.querySelector('.scroll');//你的需要滚动的标签
let isDragging = false;
let startX, startY, scrollLeft, scrollTop;

scrollElement.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.pageX - scrollElement.offsetLeft;
startY = e.pageY - scrollElement.offsetTop;
scrollLeft = scrollElement.scrollLeft;
scrollTop = scrollElement.scrollTop;
scrollElement.style.cursor = 'grabbing';
});

scrollElement.addEventListener('mouseleave', () => {
isDragging = false;
scrollElement.style.cursor = 'grab';
});

scrollElement.addEventListener('mouseup', () => {
isDragging = false;
scrollElement.style.cursor = 'grab';
});

scrollElement.addEventListener('mousemove', (e) => {
if (!isDragging) return;
e.preventDefault();
const x = e.pageX - scrollElement.offsetLeft;
const y = e.pageY - scrollElement.offsetTop;
const walkX = (x - startX) * 2; // 调整滚动速度
const walkY = (y - startY) * 2; // 调整滚动速度
scrollElement.scrollLeft = scrollLeft - walkX;
scrollElement.scrollTop = scrollTop - walkY;
});
</script>

css部分添加：

p.scroll {
  overflow: scroll;
  cursor: grab;
}
p.scroll {
cursor: grabbing; /* 鼠标按下时的指针样式 */
}

这时scroll标签就可以用鼠标拖着滚动了。

原文地址：https://blog.csdn.net/u013546553/article/details/140615062

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！