h5:移动端 :div横向滚动,小滚动条(双滚动条同步)

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

不是直接左右滑动切换页面,而是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>

 

  • 1
    点赞
  • 1
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值