<div 同步滾動是一種在網頁中實現多個容器（div）內部內容同時滾動的技術。通常情況下，當我們在一個div中滾動時，其他div的內容并不會跟隨滾動。然而，通過使用一些HTML、CSS和JavaScript的技巧，我們可以實現多個div之間的內容同步滾動，從而提供更好的用戶體驗和視覺效果。
要實現div同步滾動，我們可以使用JavaScript監聽滾動事件，并在滾動事件發生時更新其他div的滾動位置。下面我們將通過幾個代碼案例來說明這個過程。
案例1：水平同步滾動 假設我們有兩個div，分別包含了長篇文章的兩個不同部分。我們希望當一個div在水平方向上滾動時，另一個div的滾動位置也能實時同步。
HTML代碼如下：

<div id="div1" class="scrollable">
<p>第一部分文本內容...</p>
</div>
<br>
<div id="div2" class="scrollable">
<p>第二部分文本內容...</p>
</div>

CSS代碼如下：

.scrollable {
height: 200px; /* 設置div高度以顯示滾動條 */
overflow-x: scroll; /* 啟用水平滾動條 */
}

JavaScript代碼如下：

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
<br>
div1.addEventListener("scroll", function() {
div2.scrollLeft = div1.scrollLeft;
});
<br>
div2.addEventListener("scroll", function() {
div1.scrollLeft = div2.scrollLeft;
});

在上述代碼中，我們獲取了兩個div元素的引用，然后分別為它們添加了滾動事件的監聽器。在滾動事件觸發時，我們通過設置另一個div的scrollLeft屬性來實現滾動位置的同步。
案例2：垂直同步滾動 除了水平同步滾動，我們還可以實現垂直方向上的同步滾動。假設我們有兩個div，分別包含了長列表的兩個不同部分。當一個div在垂直方向上滾動時，另一個div的滾動位置也會實時同步。
HTML代碼如下：

<div id="div1" class="scrollable">
<p>列表項1</p>
<p>列表項2</p>
<p>列表項3</p>
...
</div>
<br>
<div id="div2" class="scrollable">
<p>列表項101</p>
<p>列表項102</p>
<p>列表項103</p>
...
</div>

CSS代碼和JavaScript代碼與案例1類似，只是現在我們將scrollTop屬性用于垂直滾動。
： 通過使用這些技巧，可以輕松實現多個div之間的同步滾動效果。無論是水平或是垂直方向上的滾動，我們只需要在滾動事件中更新其他div的滾動位置即可。這種同步滾動技術不僅可以提供更好的用戶體驗，還可以在一些特定的場景中增強網頁的可讀性和視覺效果。
參考文獻： 1. https://www.zhangxinxu.com/wordpress/2021/09/javascript-div%E5%90%8C%E6%AD%A5%E6%BB%9A%E5%8A%A8/ 2. https://www.html.cn/archives/5077