<div同時滾動

在網頁開發中，經常會遇到需要兩個或多個<div>元素同時滾動的情況。例如，在一個包含兩列文字內容的布局中，當用戶滾動一列時，另一列也會隨之滾動。這種效果可以為用戶提供更好的閱讀體驗，同時增加頁面的互動性。下面將通過幾個代碼案例來詳細解釋如何實現<div>元素的同時滾動。

案例1：使用純CSS實現<div>元素的同時滾動。

<style>
.scroll-container {
display: flex;
width: 100%;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
<br>
    .scroll-item {
flex: 0 0 auto;
width: 50%;
scroll-snap-align: start;
overflow-y: scroll;
height: 300px;
}
</style>
<br>
<div class="scroll-container">
<div class="scroll-item">
<p>這是第一列的內容</p>
</div>
<div class="scroll-item">
<p>這是第二列的內容</p>
</div>
</div>

在這個案例中，我們使用了CSS的flexbox布局來創建一個包含兩列的容器。通過設置容器的overflow-x: scroll;屬性，使容器出現水平滾動條。之后，我們使用scroll-snap-type: x mandatory;屬性來實現滾動吸附，使每次滾動停止在<div>元素的開始位置。

在<div>元素的樣式中，我們將flex: 0 0 auto;用于指定<div>元素不會被拉伸，width: 50%;用于設置<div>元素占容器的一半寬度。通過設置scroll-snap-align: start;屬性，使每次滾動停止在<div>元素的開始位置。同時，設置overflow-y: scroll;屬性，表示<div>元素在垂直方向上出現滾動條。

案例2：使用JavaScript實現<div>元素的同時滾動。

<style>
.scroll-container {
width: 100%;
overflow-x: scroll;
}
<br>
    .scroll-item {
display: inline-block;
width: 50%;
}
</style>
<br>
<script>
const container = document.querySelector('.scroll-container');
const items = document.querySelectorAll('.scroll-item');
<br>
    container.addEventListener('scroll', () => {
items.forEach(item => {
item.scrollTop = container.scrollTop;
});
});
</script>
<br>
<div class="scroll-container">
<div class="scroll-item">
<p>這是第一列的內容</p>
</div>
<div class="scroll-item">
<p>這是第二列的內容</p>
</div>
</div>

在這個案例中，我們使用CSS設置了一個包含兩列的容器，與第一個案例類似。然后，我們通過JavaScript實現了<div>元素的同時滾動效果。在腳本中，我們獲取了容器元素和所有的<div>元素，并給容器元素添加了一個滾動事件監聽器。當容器滾動時，我們遍歷所有的<div>元素，并將其scrollTop屬性設置為容器的scrollTop值，從而實現<div>元素的同時滾動。

：

通過以上兩個案例，我們可以看到實現<div>元素的同時滾動有多種方式。我們可以使用純CSS來設置overflow-x: scroll;屬性和scroll-snap-type: x mandatory;屬性來實現滾動吸附；或者使用JavaScript來監聽滾動事件，并通過設置<div>元素的scrollTop屬性實現同時滾動。

無論選擇哪種方式，都可以為用戶提供更好的閱讀體驗和增加頁面的互動性，使網頁更加生動有趣。