scrollInit() {
// 获取要绑定事件的元素
const nav = document.getElementById("content4")
var flag; // 鼠标按下
var downX; // 鼠标点击的x下标
var scrollLeft; // 当前元素滚动条的偏移量
nav.addEventListener("mousedown", function (event) {
flag = true;
downX = event.clientX; // 获取到点击的x下标
scrollLeft = this.scrollLeft; // 获取当前元素滚动条的偏移量
});
nav.addEventListener("mousemove", function (event) {
if (flag) { // 判断是否是鼠标按下滚动元素区域
var moveX = event.clientX; // 获取移动的x轴
var scrollX = moveX - downX; // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
this.scrollLeft = scrollLeft - scrollX // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离
}
});
// 鼠标抬起停止拖动
nav.addEventListener("mouseup", function () {
flag = false;
});
// 鼠标离开元素停止拖动
nav.addEventListener("mouseleave", function (event) {
flag = false;
});
}
鼠标横向拖动div
最新推荐文章于 2024-09-04 14:24:23 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)