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

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

admin2年前 (2022-10-05)技术分享1601

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

<!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

分享给朋友:

相关文章

[Windows] Adobe Flash Player 34.0.0.92及可用版修改方法

[Windows] Adobe Flash Player 34.0.0.92及可用版修改方法

随着 2021 年的到来,Adobe Flash Player 也迎来了告别,Adobe 在 2020 年 12 月 31 日后将不再支持 Flash Player。其实早在 2017 年,Adobe 公司就已宣布,计划在 2020 年底逐...

[教程] WTG备份新方法——FFU镜像格式

[教程] WTG备份新方法——FFU镜像格式

FFU(Full Flash Update) 格式是一种基于扇区的磁盘镜像文件格式,默认使用快速哈夫曼压缩(Xpress-Huffman)算法压缩,在捕获和部署时会生成哈希表进行校验,并可以使用DISM修改捕获的镜像。FFU格式很适合WTG...

2021可用的百度网盘高速下载方法分享

2021可用的百度网盘高速下载方法分享

最新可用方法https://blog.bitefu.net/post/163.html方法很简单就是利用网盘直链下载助手【网盘直链下载助手】是一款免费开源获取网盘文件真实下载地址的油猴脚本,基于PCSAPI,支持Windows,Mac,Li...

贾氏鸣天鼓健耳养肾操

贾氏鸣天鼓健耳养肾操

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

php Aes 加密模式ECB填充pkcs5padding base64

最近做支付项目用到了aes加密不过试了好多办法总是和官方给出的结果不一样,找了很久终于找到了测试结果同 http://tool.chacuo.net/cryptaes/ <?php /**  * [Aes&nb...

遭遇国外ip抓取或攻击怎么办一招解决禁止海外IP访问

遭遇国外ip抓取或攻击怎么办一招解决禁止海外IP访问

究发现很多网站被攻击都是来自海外的肉鸡,所以禁掉海外IP访问网站也是不错的防护手段,而且国内网站几乎很少有国外用户访问,称之为大局域网也不为过。今天主机吧来教大家如何利用域名解析禁止掉海外IP访问网站。绝大多数域名解析服务商都是提供电信联通...

发表评论

访客

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