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

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

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

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

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

分享给朋友:

相关文章

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

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

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

七牛html js上传带进度条源码

七牛html js上传带进度条源码注册链接https://s.qiniu.com/uM7RJv完整代码下载:https://n802.com/f/349707-489018989-c141f6(访问密码:5036)http://www.yi...

安卓模拟器连接端口 及常用命令

下面是我总结和测试通过的:有的是搜集来的模拟器名称                     &nbs...

百度云网盘高速下载方法[测试可用]

百度云网盘高速下载方法[测试可用]

大前提这是一个油猴脚本,安装脚本之前,必须先安装油猴浏览器扩展(如已安装则跳过):【第一步】下载油猴 --> 如有提示安装,则直接安装即可,否则继续执行第二步【第二步】安装油猴 --> 参考其中章节:&nbs...

【不忘初心】19041/19042/19043(20H1,20H2,21H1)告别繁琐 一键替换太阳谷图标 一键恢复原版图标 一键恢复文件夹预览

【不忘初心】19041/19042/19043(20H1,20H2,21H1)告别繁琐 一键替换太阳谷图标 一键恢复原版图标 一键恢复文件夹预览

一键替换太阳谷图标,一键恢复原版图标,注意是一键!!!  太阳谷图标确实很好看,很新颖 !论坛也有相关替换教程,有的需要改权限,有的需要PE下替换,有的还得重启,搞不好很容易翻车,有些小白同学只能望梅止渴,今天以上统统告...

[钉钉]内网穿透之HTTP穿透

[钉钉]内网穿透之HTTP穿透

内网穿透之HTTP穿透更新时间:2021-06-21鉴于很多开发者在临时体验开发时往往没有公网域名或者公网IP,本工具提供了一个公网代理服务,目的是方便开发测试。注意 本工具不保证稳定性,仅适用于开发测试阶段,禁止当作公网域名使用...

发表评论

访客

看不清,换一张

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