Jquery 实现PC拖拽滚动(水平）和自动定位到最近li

本文介绍如何使用Jquery在PC上实现水平拖拽滚动效果，并自动定位到最近的元素。通过设定li间的间隔，获取li宽度和数量，动态调整.x-box宽度。利用mousedown和mousemove事件实现拖拽滚动，mouseup事件触发自动定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Jquery 实现PC拖拽滚动(水平）和自动定位到最近元素

如何在pc上像手机一样滑动屏幕滚动？
如何自动定位到最近li？

最终效果

废话少说，我们先来看看效果：
PC拖拽滚动(水平）和自动定位到最近li
在PC网页上拖拽滚动
移动端自动定位到最近li：

逐步功能实现

要实现这样的效果我们得先得把基本页面写出来，HTML代码：

<div class="box">
	<ul class="x-box">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

CSS代码：

*{
	margin: 0;padding: 0;
}
.box{
	width: 1000px;
	margin:80px auto;
	overflow-x: scroll;
}
/* 隐藏滚动条 */
.box::-webkit-scrollbar{
    width: 0;
}
.x-box{
	list-style: none;
	background-color: #eeeede;
	display: flex;
	justify-content: space-evenly;
}
.x-box li{
	flex:none;
	width: 800px;height: 500px;
	background-color: #008000;
}

这里我没有给.x-box添加宽度，因为我们要按照li的数量动态的添加宽度，这样就可以自由添加li了，.x-box的宽度=li的宽度*li的数量，再算上每个li之间和两边的边距就行了。
我用了JQuery，所以先导入JQuery:

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

以下是js代码：

// 设定每个li之间的间隔
var liMargin=80;
// 获取第一个li的宽度然后加上设定好的li的间距
var liWidth=$(".x-box li:first").width()+liMargin;
// 获取li的个数
var liLen=$(".x-box li").length;

// 初始化拖动框宽度
$(".x-box").width(liWidth*liLen+liMargin);
console.log("liWidth:"+liWidth);

然后来写水平拖动滚动的功能：
简单来说，鼠标在.box范围内按下左键时记录当前y坐标，松开左键时记录y坐标，两个坐标一相减就得到了滚动框该滚动的距离。
以下是js代码：

// pc拖动效果
box.mousedown(function(e){
	let x = e.pageX;
	//获得当前滚动框离左边的距离
	let scrollX=box.scrollLeft();
	$(document).mousemove(function (e) {
		//阻止默认事件
		e.preventDefault();
		let xnew = e.pageX;
		let xChange = x-xnew;
		//由于直接使用两坐标之差滑动的过快 我除以了12
		let move=xChange/12+scrollX;
		// 滚动并赋值
		scrollX=box.scrollLeft(move).scrollLeft();
	})
});
	
// 绑定pc抬起鼠标事件
$(document).mouseup(function(){
	//删除绑定事件
	$(document).unbind("mousemove");
});

最后加上pc自动定位到最近li和移动设备的自动定位到最近li的功能。

//自动定位到最近li功能，传入一个JQuery对象，也就是$(".box")
function scrollPic(obj){
	let move=0;
	let scrollLeft = obj.scrollLeft();
	for(let i=1;i<liLen;i++){
		if(scrollLeft<liWidth*i){
			if(scrollLeft<=liWidth*(i-0.5)){
				move = liWidth*(i-1);
			}else{
				move = liWidth*i;
			}
			break;
		}
	}
	// 添加滚动动画过渡
	obj.animate({scrollLeft:move},300);
}
// 绑定pc抬起鼠标事件
$(document).mouseup(function(){
	$(document).unbind("mousemove");
	scrollPic(box);
});
// 绑定移动设备触摸事件
box.on("touchend",function(){
	scrollPic($(this));
});

最终代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Jquery 实现PC拖拽滚动(水平）</title>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
		<style type="text/css">
			*{
				margin: 0;padding: 0;
			}
			.box{
				width: 1000px;
				margin:80px auto;
				overflow-x: scroll;
			}
			/* 隐藏滚动条 */
			.box::-webkit-scrollbar {
			    width: 0;
			}
			.x-box{
				list-style: none;
				background-color: #eeeede;
				display: flex;
				justify-content: space-evenly;
			}
			.x-box li{
				flex:none;
				width: 800px;height: 500px;
				background-color: #008000;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				var box=$(".box");
				// 设定每个li之间的间隔
				var liMargin=80;
				// 获取第一个li的宽度然后加上
				var liWidth=$(".x-box li:first").width()+liMargin;
				// 获取li的个数
				var liLen=$(".x-box li").length;
				
				// 初始化拖动框宽度
				$(".x-box").width(liWidth*liLen+liMargin);
				console.log("liWidth:"+liWidth);
				
				//自动定位到最近li功能
				function scrollPic(obj){
					let move=0;
					let scrollLeft = obj.scrollLeft();
					for(let i=1;i<liLen;i++){
						if(scrollLeft<liWidth*i){
							if(scrollLeft<=liWidth*(i-0.5)){
								move = liWidth*(i-1);
							}else{
								move = liWidth*i;
							}
							break;
						}
					}
					// 添加动画过渡
					obj.animate({scrollLeft:move},300);
				}
				
				// 绑定移动设备触摸事件
				box.on("touchend",function(){
					scrollPic($(this));
				});
				
				// pc拖动效果
				box.mousedown(function(e){
					let x = e.pageX;
					let scrollX=box.scrollLeft();
					$(document).mousemove(function (e) {
						e.preventDefault();
						let xnew = e.pageX;
						let xChange = x-xnew;
						//由于直接使用两坐标之差滑动的过快 我除以了12
						let move=scrollX+xChange/12;
						// 滚动并赋值
						scrollX=box.scrollLeft(move).scrollLeft();
					})
				});
				
				// 绑定pc抬起鼠标事件
				$(document).mouseup(function(){
					$(document).unbind("mousemove");
					scrollPic(box);
				});
			})
		</script>
	</head>
	<body>
		<div class="box">
			<ul class="x-box">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>