JS鼠标事件与滚动条的结合，实现类型与拖动的功能，处理横向滚动条左右不好移动的问题

brains丶小白

已于 2022-09-01 17:11:36 修改

阅读量1.3k

点赞数

文章标签： javascript 前端 css html

于 2022-09-01 16:50:36 首次发布

本文链接：https://blog.csdn.net/Yxd0724/article/details/126646335

版权

JavaScript 鼠标事件拖动效果滚动条用户交互

关键词由CSDN通过智能技术生成

鼠标事件与滚动条的结合

该方法主要解决的是有横向滚动条的元素，滚动条太小，要左右移动太难，所以使用js事件进行处理，直接对元素拖动就能左右移动滚动条，但是又不想使用拖拽事件。
主要事件：

onmousedown 鼠标点击
onmousemove 鼠标移动
onmouseout 鼠标移出
onmouseup 鼠标松开

效果图：
在这里插入图片描述

代码块：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用鼠标事件完成类似于拖拽的功能</title>
		<style type="text/css">
		p{
			text-align: center;
			margin-top: 60px;
		}
			#father-box {
				width: 600px;
				height: 600px;
				border: 1px solid black;
				overflow: auto;
				margin: 0 auto;
			}

			#son-box {
				width: 800px;
				height: 800px;
				line-height: 800px;
				text-align: center;
				user-select:none;
			}
		</style>
	</head>
	<body>
		<p id="p1">默认状态</p>
		<p id="p2" style="display:none;">移动后的状态——只使用鼠标拖动，未拖动滚动条</p>
		<div id="father-box"  onmousedown="mousedownFun(event)" onmousemove="mousemoveFun(event)"
				onmouseout="mouseoutFun(event)" onmouseup="mouseupFun(event)">
			<div id="son-box">
				这只是一些文字，用来看的
			</div>
		</div>
		<script>
			let isMove = false; // 判断鼠标按下或是抬起状态
			let defX = 0; // 初始的X位置
			let defY = 0; // 初始的Y位置
			let stateX = 0; // 开始拖动的X
			let stateY = 0; // 开始拖动的Y
			let moveX = 0; // 拖动的X距离
			let moveY = 0; // 拖动的Y距离
			// 鼠标按下——准备开始拖拽
			function mousedownFun(event) {
				let fatherBox = document.getElementById('father-box');
				isMove = true;
				defX = fatherBox.scrollLeft;
				defY = fatherBox.scrollTop;
				stateX = event.x;
				stateY = event.y;
			}
			// 鼠标移动——正在拖拽
			function mousemoveFun(event) {
				let fatherBox = document.getElementById('father-box');
				let p1 = document.getElementById('p1');
				let p2 = document.getElementById('p2');
				if (isMove) {
					moveX = stateX - event.x;
					moveY = stateY - event.y;
					fatherBox.scrollLeft = defX + moveX;
					fatherBox.scrollTop = defY + moveY;
					p1.style.display = 'none'
					p2.style.display = 'block'
				}
			}
			// 鼠标移出——不在对象内，结束拖动
			function mouseoutFun(event) {
				mouseupFun()
			}
			// 鼠标松开——结束拖拽
			function mouseupFun(event) {
				isMove = false;
				defX = event.x;
				defY = event.y;
			}
		</script>
	</body>
</html>

brains丶小白

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS鼠标事件与滚动条的结合，实现类型与拖动的功能，处理横向滚动条左右不好移动的问题

该方法主要解决的是有横向滚动条的元素，滚动条太小，要左右移动太难，所以使用js事件进行处理，直接对元素拖动就能左右移动滚动条，但是又不想使用拖拽事件。
复制链接

扫一扫