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

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

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

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

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

分享给朋友:

相关文章

mysql 数据表中查找重复记录

select [user_name],count(*) as count from [user_table] group by [user_name] having count>1; user_name 要查重复记录的字段u...

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

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

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

用CMD命令查询域名的DNS解析记录:A,NS,MX,CNAME,TXT

1、查询域名的A记录nslookup -qt=A bitefu.net当然查询A记录你直接用ping命令来ping域名也可以获得A记录。2、查询域名的NS记录nslookup -qt=NS bitefu.net3、查询域名的MX记录nslo...

阿里云盘 分享脚本 抢先实现文件分享功能

Win端基本所有浏览器均可进行安装安装地址:https://bbs.tampermonkey.net.cn/thread-427-1-1.html如何安装:Tampermoneky安装:谷歌浏览器参考:https://bbs.tamperm...

记一次阿里云服务器cc攻击防护 windows 2012 iis8

记一次阿里云服务器cc攻击防护 windows 2012 iis8

上次连续一周左右阿里云服务器都在遭受cc攻击.导致访问量特别大,节假日接口调用特别缓慢或者根本访问不了的情况.本身服务器安装了 网站安全狗(IIS版) .并开始了防cc攻击.但是呢,平时还行,这次压力山大.于是一气之下用pytho...

[教程福利] Python 全网比较全面的资源

阿里 Python 应该算比较全面了,编辑完了差不多用了三个小时左右,如果对你有帮助,给个免费的热心吗,在这里谢谢了各位大佬。092-****实战课-畅销3年的Python分布式爬虫课程-原版提取https://www.aliyundriv...

发表评论

访客

看不清,换一张

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