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

效果:

代码:

单独封装一个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;
}
相关推荐
CodeCraft Studio2 小时前
PDF处理控件Aspose.PDF教程:使用 Python 将 PDF 转换为 Base64
开发语言·python·pdf·base64·aspose·aspose.pdf
零点零一2 小时前
VS+QT的编程开发工作:关于QT VS tools的使用 qt的官方帮助
开发语言·qt
2501_915918413 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂4 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技4 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip4 小时前
JavaScript二叉树相关概念
前端
lingchen19064 小时前
MATLAB的数值计算(三)曲线拟合与插值
开发语言·matlab
gb42152875 小时前
java中将租户ID包装为JSQLParser的StringValue表达式对象,JSQLParser指的是?
java·开发语言·python
一朵梨花压海棠go5 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
蒋星熠5 小时前
Flutter跨平台工程实践与原理透视:从渲染引擎到高质产物
开发语言·python·算法·flutter·设计模式·性能优化·硬件工程