前端:横向滚动条,拖动进行左右滚动(含隐藏滚动条)

效果:

代码:

单独封装一个addMouseEvent.ts文件

TypeScript 复制代码
// 添加鼠标移动事件

export const addMouseEvent = (el: string) => {
	let container = document.querySelector(el) as HTMLDivElement;
	let isMouseDown = false;
	let startX = 0;
	let scrollLeft = 0;

	// 鼠标按下事件
	const onMouseDown = (e: MouseEvent) => {
		isMouseDown = true;
		startX = e.pageX - container.offsetLeft;
		scrollLeft = container.scrollLeft;
	};
	// 鼠标移动事件
	const onMouseMove = (e: MouseEvent) => {
		if (!isMouseDown) return;
		e.preventDefault();
		let x = e.pageX - container.offsetLeft;
		let walk = (x - startX) * 1; // 调整滚动速度
		container.scrollLeft = scrollLeft - walk;
	};
	// 鼠标抬起事件
	const onMouseUp = () => {
		isMouseDown = false;
	};
	// 鼠标离开事件
	const onMouseLeave = () => {
		isMouseDown = false;
	};

	container.addEventListener("mousedown", function (e) {
		onMouseDown(e);
	});
	container.addEventListener("mouseleave", function () {
		onMouseLeave();
	});
	container.addEventListener("mouseup", function () {
		onMouseUp();
	});
	container.addEventListener("mousemove", function (e) {
		onMouseMove(e);
	});

	const removeEventListeners = () => {
		container.removeEventListener("mousedown", onMouseDown);
		container.removeEventListener("mouseleave", onMouseLeave);
		container.removeEventListener("mouseup", onMouseUp);
		container.removeEventListener("mousemove", onMouseMove);
	};
	return removeEventListeners;
};

在页面中使用:

.device-list是要执行滑动的dom元素

TypeScript 复制代码
onMounted(() => {
	nextTick(() => {
		mouseLeaveEvent.value = addMouseEvent(".device-list");
	});
});
onBeforeUnmount(() => {
	mouseLeaveEvent.value && mouseLeaveEvent.value();
});

隐藏横向滚动条:

css 复制代码
::-webkit-scrollbar {
	/* 隐藏Webkit浏览器的滚动条 */
	display: none;
}
相关推荐
weixin_3993806914 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
伍哥的传说35 分钟前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
AA-代码批发V哥36 分钟前
JavaScript之数组方法详解
javascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator1 小时前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆1 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
witton1 小时前
Go语言网络游戏服务器模块化编程
服务器·开发语言·游戏·golang·origin·模块化·耦合
叹一曲当时只道是寻常1 小时前
Softhub软件下载站实战开发(十六):仪表盘前端设计与实现
前端·golang
超级土豆粉1 小时前
npm 包 scheduler 介绍
前端·npm·node.js
bug爱好者1 小时前
原生小程序如何实现跨页面传值
前端·javascript