h5：移动端：div横向滚动，小滚动条（双滚动条同步）

最新推荐文章于 2024-04-12 21:52:04 发布

原创最新推荐文章于 2024-04-12 21:52:04 发布 · 4.1k 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#h5 #滚动条

本文介绍了一种在移动端实现横向滚动条的方法，通过两个div分别承载内容和滚动条，利用CSS隐藏内容div的滚动条并展示滚动条div的滚动条，再通过JavaScript实现两者之间的同步滚动，提供良好的用户体验。

移动端，横向滚动的时候，希望有个小滚动条标志一下，说明是可以左右滑动的。

不是直接左右滑动切换页面，而是div左右滑动。

效果如移动掌上营业厅这般。下面蓝色的是个滚动条

实现思路：

1、可以左右滑动的放内容的div1 下方专门用来做滚动条的div2

2、隐藏div1的滚动条，显示div2滚动条

3、滚动条同步，实现上面div1滑动，下面div2滚动条滚动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.scroll1 {
				overflow-y: hidden;
				overflow-x: auto;
				white-space: nowrap;
				border: 1px solid red;
				font-size: 60px;
			}

			.scroll1::-webkit-scrollbar {
				/*滚动条整体样式*/
				width: 0;
				/*高宽分别对应横竖滚动条的尺寸*/
				height: 0;
			}

			.scroll2 {
				overflow-y: hidden;
				overflow-x: auto;
				white-space: nowrap;
				border: 1px solid red;
			}

			.scroll2::-webkit-scrollbar {
				/*滚动条整体样式*/
				width: 0;
				/*高宽分别对应横竖滚动条的尺寸*/
				height: 30px;
			}

			.scroll2::-webkit-scrollbar-thumb {
				/*滚动条里面小方块*/
				border-radius: 50px;
				/* -webkit-box-shadow: inset 0 0 5px rgba(48, 185, 242, 1); */
				background: blue;
			}

			.scroll2::-webkit-scrollbar-track {
				/*滚动条里面轨道*/
				-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
				border-radius: 50px;
				background: greenyellow;
			}
		</style>
	</head>
	<body>
		<!-- 这是一个可以左右滑动的div,内容长度是不固定的-->
		<div style="width:400px" class="scroll1">
			我是内容div,一个可以左右滑动的div,我要有足够的内容，才能滑动！我是不固定的！
		</div>
		<!-- 这是用来展示滚动条的-->
		<div style="width:80px;" class="scroll2">
			<!-- 这是用来撑开div出现滚动条的-->
			<div id="content" style="min-width:160px;height:35px;"></div>
		</div>
		<!-- <script src="js/jquery-3.3.1.min.js"></script> -->
		<script>
			//实现滚动条同步的
			var scroll1 = document.querySelector('.scroll1');
			var scroll2 = document.querySelector('.scroll2');
			scroll1.addEventListener('scroll', function(e) {
				//使用比例来实现同步滚动 
				//scroll1.scrollWidth 滚动长度  
				//scroll1.clientWidth div长度
				var scale = (scroll1.scrollWidth - scroll1.clientWidth) / (scroll2.scrollWidth - scroll2.clientWidth);
				scroll2.scrollLeft = scroll1.scrollLeft / scale;
			})
		</script>
	</body>

</html>