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

效果:

代码:

单独封装一个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;
}
相关推荐
数据小爬虫@1 分钟前
如何高效利用Python爬虫按关键字搜索苏宁商品
开发语言·爬虫·python
ZJ_.3 分钟前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营8 分钟前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Narutolxy9 分钟前
深入探讨 Go 中的高级表单验证与翻译:Gin 与 Validator 的实践之道20241223
开发语言·golang·gin
Hello.Reader16 分钟前
全面解析 Golang Gin 框架
开发语言·golang·gin
禁默27 分钟前
深入浅出:AWT的基本组件及其应用
java·开发语言·界面编程
Cachel wood33 分钟前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端35 分钟前
0基础学前端-----CSS DAY9
前端·css
Code哈哈笑36 分钟前
【Java 学习】深度剖析Java多态:从向上转型到向下转型,解锁动态绑定的奥秘,让代码更优雅灵活
java·开发语言·学习
joan_8539 分钟前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui