div横向滚动，顶部滚动条（双滚动条同步）
横向滚动的时候，希望滚动条出现在顶部方便内容多的时候在顶部就可以直接拉到不用滑动到底部再拉滚动条。
<!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>
