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

效果:

代码:

单独封装一个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;
}
相关推荐
小桥风满袖35 分钟前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
小Wang1 小时前
npm私有库创建(docker+verdaccio)
前端·docker·npm
用户73087011793081 小时前
Vue中集成文字转语音:使用Web Speech API实现功能
前端
前端人类学1 小时前
掌控异步洪流:多请求并发下的顺序控制艺术
javascript·promise
李重楼1 小时前
前端性能优化之 HTTP/2 多路复用
前端·面试
yanessa_yu1 小时前
全屏滚动网站PC端自适应方案
前端
RoyLin1 小时前
TypeScript设计模式:桥接模式
前端·后端·typescript
火星开发者1 小时前
Vue中实现Word、Excel、PDF预览的详细步骤
前端
CryptoRzz1 小时前
印度尼西亚股票数据API对接实现
javascript·后端
brzhang1 小时前
干翻 Docker?WebAssembly 3.0 的野心,远不止浏览器,来一起看看吧
前端·后端·架构