HTML+css+jquery div聯動滾動條
最近有一個需求是多個寬度相同的Div捲軸要連動的功能，如下圖：
這程式單純使用jquery+css就可以完成：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>聯動滾動條實作</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.scroll-show {
width: 300px; /* 設定寬度 */
height: 100px; /* 設定高度 */
overflow-x: auto; /* 可橫向滾動 */
border: 1px solid #000;
margin-bottom: 10px; /* 每個DIV之間的間距 */
}
.scroll-container {
width: 300px; /* 設定寬度 */
height: 100px; /* 設定高度 */
overflow-x: hidden; /* 可橫向滾動，但不顯示捲軸 */
border: 1px solid #000;
margin-bottom: 10px; /* 每個DIV之間的間距 */
}
.scroll-container:-webkit-scrollbar {
display:none;
}
.content {
width: 800px; /* 設定內容的寬度，超出容器寬度可以左右滾動 */
height: 100%; /* 與container一致的高度 */
background: linear-gradient(to right, #f0f0f0, #c0c0c0);
}
</style>
</head>
<body>
<div class="scroll-show" id="div1">
<div class="content">這是第1個DIV的內容，內容很長，會橫向滾動。</div>
</div>
<div class="scroll-container" id="div2">
<div class="content">這是第2個DIV的內容，內容很長，會橫向滾動。</div>
</div>
<div class="scroll-container" id="div3">
<div class="content">這是第3個DIV的內容，內容很長，會橫向滾動。</div>
</div>
<div class="scroll-container" id="div4">
<div class="content">這是第4個DIV的內容，內容很長，會橫向滾動。</div>
</div>
<div class="scroll-container" id="div5">
<div class="content">這是第5個DIV的內容，內容很長，會橫向滾動。</div>
</div>
<div class="scroll-container" id="div6">
<div class="content">這是第6個DIV的內容，內容很長，會橫向滾動。</div>
</div>
<script>
$(document).ready(function() {
$('#div1').on('scroll', function() {
// 當div1被滾動時，同步其他div的滾動
var scrollLeft = $(this).scrollLeft();
$('.scroll-container').not('#div1').scrollLeft(scrollLeft);
});
});
</script>
</body>
</html>
嗯，就是這麼簡單。
分享至
成為作者繼續創作的動力吧！
© 2024 vocus All rights reserved.