当前位置:首页 > 技术分享 > 正文内容

div横向滚动,顶部滚动条(双滚动条同步)

admin3年前 (2022-10-05)技术分享2345

横向滚动的时候,希望滚动条出现在顶部方便内容多的时候在顶部就可以直接拉到不用滑动到底部再拉滚动条。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>顶部横向滚动条</title>
<style>
	.scroll1 {overflow-y: hidden;overflow-x: auto;white-space: nowrap;}
	.scroll1::-webkit-scrollbar {width: 0;height: 0;}
	.scroll2 {overflow-y: hidden;overflow-x: auto;white-space: nowrap;}
	.scroll2::-webkit-scrollbar {width: 0;height: 6px;}/*高宽分别对应横竖滚动条的尺寸*/
	.scroll2::-webkit-scrollbar-thumb {border-radius: 50px;background: #aaa;}
	.scroll2::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);border-radius: 50px;background: #fff;}/*滚动条里面轨道*/
</style>
</head>
<body>
	<!-- 这是用来展示滚动条的-->
	<div style="width:100%;" class="scroll2"><!-- 这是用来撑开div出现滚动条的-->
		<div id="content" style="min-width:130%;height:6px;"></div>
	</div>
	<!-- 这是一个可以左右滑动的div,内容长度是不固定的-->
	<div style="width:400px" class="scroll1">
		我是内容div,一个可以左右滑动的div,我要有足够的内容,才能滑动!我是不固定的!
	</div>
	<script>
		//实现滚动条同步的
		var scroll1 = document.querySelector('.scroll1');
		var scroll2 = document.querySelector('.scroll2');
		scroll1.addEventListener('scroll', function(e) {
			//使用比例来实现同步滚动 
			var scale = (scroll1.scrollWidth - scroll1.clientWidth) / (scroll2.scrollWidth - scroll2.clientWidth);
			scroll2.scrollLeft = scroll1.scrollLeft / scale;
	 	})
		scroll2.addEventListener('scroll', function(e) {
			//使用比例来实现同步滚动
			var scale = (scroll2.scrollWidth - scroll2.clientWidth) / (scroll1.scrollWidth - scroll1.clientWidth);
			scroll1.scrollLeft = scroll2.scrollLeft / scale;
		})
	</script>
</body>
</html>


扫描二维码推送至手机访问。

版权声明:本文由小刚刚技术博客发布,如需转载请注明出处。

本文链接:https://blog.bitefu.net/post/433.html

分享给朋友:

相关文章

Chrome 开启自带多线程下载支持 提升下载速度

Chrome 开启自带多线程下载支持 提升下载速度

Chrome 是当前性能最高的浏览器之一,但在下载速度方面,Chrome 可一点都不快。当前 Chrome 的下载仍是单线程机制,速度非常慢。对此,大家不得不使用第三方的下载工具,例如迅雷、IDM 等支持多线程下载的下载软件,来提高下载速度...

微软版Ghost Win10:FFU映像备份和还原

微软版Ghost Win10:FFU映像备份和还原

在日常的维护中,系统的备份和还原是大家经常需要操作的事情。虽然Windows 10已经提供很多的工具,如系统还原、WIM备份/还原,VHD备份等。不过这些工具大多是基于文件的备份/还原。我们以前经常的使用的Ghost则是基于扇区的备份/还原...

超高性比的斐讯盒子T1,刷第三方YYF固件机教程超级详细版

超高性比的斐讯盒子T1,刷第三方YYF固件机教程超级详细版

家里面买了斐讯盒子T1,必不可少的就是刷机,刷机一直爽,一直刷机一直爽,这样的快乐一般人体会不到。原来斐讯盒子N1,T1,还有斐讯K2P路由器也变成了性价比超高的东东,而且众多大神也带来了超多可玩性非常高的固件和破解。楼主今天扒到了相关超高...

centos 配置Let's Encrypt 泛域名https证书

centos 配置Let's Encrypt 泛域名https证书

前言2018年1月份Letsencrypt可以申请泛域名证书,这让我们部署多域名、多站点https省了很多功夫,终于可以不用维护多个域名的https证书。笔者以acme.sh为例,手把手教你配置https证书~本教程适用于centos 6....

VirtualXposed 不支持32位应用 32位无法安装问题解决办法

VirtualXposed 不支持32位应用 32位无法安装问题解决办法

VirtualXposed 是基于VirtualApp 和 epic 在非ROOT环境下运行Xposed模块的实现(支持5.0~10.0)。与 Xposed 相比,目前 VirtualXposed 有...

贾氏鸣天鼓健耳养肾操

贾氏鸣天鼓健耳养肾操

《贾氏鸣天鼓健耳养肾操》鸣天鼓是健耳强肾治耳病的古法,贾氏越云自创的鸣天鼓健耳养肾操是在古法的基础上创建。顺序:1静坐挺胸。2双手放心脏位置的胸口,左手掌盖住右手掌。3闭目静心,深呼吸19下。4双手相互搓揉,让手掌发热。5用发热的双手手掌严...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。