HTML+css+jquery div聯動滾動條
更新於 發佈於 閱讀時間約 5 分鐘
最近有一個需求是多個寬度相同的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>
嗯，就是這麼簡單。
留言0
查看全部
你可能也想看
Google News 追蹤
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~