<div 滑動加載是指當用戶滾動網頁時，自動加載新內容的一種技術。它常用于實現無限滾動或分頁加載等功能，使用戶能夠無需點擊翻頁按鈕或刷新頁面即可加載更多內容。在本文中，我們將通過幾個代碼案例來詳細解釋并展示div滑動加載的實現方法。

案例一：基于jQuery的滑動加載

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
// 在達到頁面底部時觸發加載新內容的函數
loadMoreContent();
}
});
<br>
function loadMoreContent() {
// 執行加載新內容的操作，比如通過AJAX請求獲取新數據并添加到頁面中
$.ajax({
url: 'load-more-content.php',
type: 'GET',
dataType: 'html',
success: function(data) {
$('#content-wrapper').append(data);
}
});
}
</script>

在上述代碼中，我們使用了jQuery的scroll()方法來監聽窗口滾動事件。當滾動條滾動到頁面底部時，觸發loadMoreContent()函數。該函數通過AJAX請求來獲取新數據，并將數據添加到頁面中的content-wrapper元素中。

案例二：基于Intersection Observer的滑動加載

<script>
const options = {
root: null, // 默認以視窗作為根元素
rootMargin: '0px',
threshold: 1.0 // 當目標元素完全進入視窗時觸發加載新內容的函數
};
<br>
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
// 目標元素進入視窗，觸發加載新內容的函數
loadMoreContent();
}
});
}, options);
<br>
observer.observe(document.querySelector('#trigger'));
</script>

上述代碼使用了Intersection Observer API來實現滑動加載。我們創建了一個IntersectionObserver實例，并設置了觸發加載新內容函數的閾值（threshold）。當頁面中的觸發元素（如id為"trigger"的元素）完全進入視窗時，觸發loadMoreContent()函數來加載新內容。

：

div滑動加載是一種方便實現無限滾動和分頁加載功能的技術。通過監聽用戶滾動事件或使用Intersection Observer API，我們可以在滾動到頁面底部或特定元素進入視窗時觸發加載新內容的函數。這種加載方式可以提升用戶體驗，使用戶能夠無縫瀏覽更多內容，同時減少頁面刷新和跳轉的操作。