移動端，橫向滾動的時候，希望有個小滾動條標誌一下，說明是可以左右滑動的。
不是直接左右滑動切換頁面，而是div左右滑動。
效果如移動掌上營業廳這般。下面藍色的是個滾動條
實現思路 ：
1、可以左右滑動的放內容的div1 下方專門用來做滾動條的div2
2、隱藏div1的滾動條，顯示div2滾動條
3、滾動條同步，實現上面div1滑動，下面div2滾動條滾動
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.scroll1 {
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;
border: 1px solid red;
font-size: 60px;
}
.scroll1::-webkit-scrollbar {
/*滾動條整體樣式*/
width: 0;
/*高寬分別對應橫豎滾動條的尺寸*/
height: 0;
}
.scroll2 {
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;
border: 1px solid red;
}
.scroll2::-webkit-scrollbar {
/*滾動條整體樣式*/
width: 0;
/*高寬分別對應橫豎滾動條的尺寸*/
height: 30px;
}
.scroll2::-webkit-scrollbar-thumb {
/*滾動條裏面小方塊*/
border-radius: 50px;
/* -webkit-box-shadow: inset 0 0 5px rgba(48, 185, 242, 1); */
background: blue;
}
.scroll2::-webkit-scrollbar-track {
/*滾動條裏面軌道*/
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
border-radius: 50px;
background: greenyellow;
}
</style>
</head>
<body>
<!-- 這是一個可以左右滑動的div,內容長度是不固定的-->
<div style="width:400px" class="scroll1">
我是內容div,一個可以左右滑動的div,我要有足夠的內容，才能滑動！我是不固定的！
</div>
<!-- 這是用來展示滾動條的-->
<div style="width:80px;" class="scroll2">
<!-- 這是用來撐開div出現滾動條的-->
<div id="content" style="min-width:160px;height:35px;"></div>
</div>
<!-- <script src="js/jquery-3.3.1.min.js"></script> -->
<script>
//實現滾動條同步的
var scroll1 = document.querySelector('.scroll1');
var scroll2 = document.querySelector('.scroll2');
scroll1.addEventListener('scroll', function(e) {
//使用比例來實現同步滾動
//scroll1.scrollWidth 滾動長度
//scroll1.clientWidth div長度
var scale = (scroll1.scrollWidth - scroll1.clientWidth) / (scroll2.scrollWidth - scroll2.clientWidth);
scroll2.scrollLeft = scroll1.scrollLeft / scale;
})
</script>
</body>
</html>