div 滾動監聽

在前端開發中，我們經常會遇到需要監聽 div 元素滾動事件的需求。比如當用戶滾動到某個位置時，我們需要觸發相應的動作或加載更多內容。本文將介紹如何使用 JavaScript 監聽 div 的滾動事件，并給出幾個代碼案例來詳細說明。

案例一：基本滾動監聽

下面是一個基本的 div 滾動監聽的代碼示例：

<div id="scrollableDiv" style="height: 300px; width: 300px; overflow-y: scroll;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec diam non justo ultrices convallis non sed ex. Integer sollicitudin felis a ligula accumsan aliquam. Sed fermentum faucibus tortor, a elementum lectus imperdiet at. Fusce et bibendum sem, in varius justo. Nam eget lacinia velit, nec volutpat dui. Mauris interdum tortor vitae euismod eleifend. Mauris sit amet urna vitae ligula placerat varius. Morbi consequat nibh sed turpis accumsan ultricies. Aliquam erat volutpat. Suspendisse ac metus id purus congue faucibus fringilla vitae ligula. Phasellus malesuada risus a risus auctor, nec pretium ligula ultricies. Maecenas venenatis metus quam, ac vestibulum quam interdum quis. Integer euismod convallis ultricies. Vestibulum cursus, nulla ut ultricies efficitur, sem arcu ultrices nulla, vel volutpat sapien ante ac velit.</p>
</div>
<br>
<script>
var scrollableDiv = document.getElementById("scrollableDiv");
<br>
  scrollableDiv.addEventListener("scroll", function() {
console.log("div 滾動了");
});
</script>

上面的代碼中，我們通過 id 獲取到了帶有滾動條的 div，然后監聽了其滾動事件。當 div 滾動時，控制臺將輸出"div 滾動了"。

案例二：滾動到底部加載更多內容

下面是一個實現滾動到底部加載更多內容的代碼示例：

<div id="scrollableDiv" style="height: 300px; width: 300px; overflow-y: scroll;">
<ul id="contentList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<br>
<script>
var scrollableDiv = document.getElementById("scrollableDiv");
var contentList = document.getElementById("contentList");
<br>
  scrollableDiv.addEventListener("scroll", function() {
if (scrollableDiv.scrollTop + scrollableDiv.offsetHeight >= scrollableDiv.scrollHeight) {
// 模擬加載更多內容
var newItem = document.createElement("li");
newItem.textContent = "New Item";
contentList.appendChild(newItem);
}
});
</script>

上面的代碼中，我們通過監聽 div 的滾動事件，當滾動到底部（即 scrollTop + offsetHeight 等于 scrollHeight）時，動態添加了一個新的列表項。這樣，用戶滾動到底部時，會不斷加載更多的內容。

案例三：滾動條位置標記

下面是一個實現滾動條位置標記的代碼示例：

<div id="scrollableDiv" style="height: 300px; width: 300px; overflow-y: scroll;">
<p>Scrollable Div</p>
</div>
<br>
<script>
var scrollableDiv = document.getElementById("scrollableDiv");
<br>
  scrollableDiv.addEventListener("scroll", function() {
console.log("滾動位置：" + scrollableDiv.scrollTop);
});
</script>

上面的代碼中，我們通過監聽 div 的滾動事件，在控制臺輸出當前滾動位置。這樣，我們可以方便地了解滾動條的位置，進行相應的處理。

通過以上幾個代碼案例的介紹，我們學習了如何使用 JavaScript 監聽 div 的滾動事件。這對于構建交互豐富的網頁和應用非常有用，希望對大家有所幫助。