JavaScript 如何實現滾動到頁面底部自動載入的內容縮放並保持縱橫比和居中顯示？

JavaScript 如何實作捲動到頁面底部自動載入的內容縮放並保持縱橫比和居中顯示？

在網頁開發中，有時候我們需要實作當使用者捲動到頁面底部時，自動載入更多的內容。而在載入過程中，經常需要對內容進行縮放以確保顯示效果的美觀。本文將介紹如何使用JavaScript實作捲動到頁面底部自動載入內容，並對已載入的內容進行縮放，並保持其縱橫比和居中顯示。

首先，我們需要監聽網頁的捲動事件。捲動到頁面底部時，觸發載入內容的函數。例如：

window.addEventListener('scroll', function() {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        // 执行加载内容的函数
        loadMoreContent();
    }
});

上述程式碼中，window.innerHeight表示瀏覽器視窗的高度，window.scrollY表示捲軸的垂直偏移量， document.body.offsetHeight表示整個頁面的高度。當捲動到頁面底部時，window.innerHeight window.scrollY的值將大於或等於document.body.offsetHeight的值。

接下來，我們需要定義載入內容的函數loadMoreContent()。在這個函數中，我們可以使用AJAX等技術從伺服器動態載入內容。為了簡單起見，在這裡我們假設已經有一個陣列contentData儲存了要載入的內容。我們將獲取數組中的內容，並動態建立DOM元素來展示。

function loadMoreContent() {
    // 获取要加载的内容
    var content = contentData.shift();
    
    // 创建DOM元素
    var contentDiv = document.createElement('div');
    contentDiv.className = 'content-div';
    var img = document.createElement('img');
    img.src = content.imgUrl;
    // 设置缩放样式
    img.style.maxHeight = '100%';
    img.style.maxWidth = '100%';
    img.style.objectFit = 'contain';
    contentDiv.appendChild(img);
    
    // 将DOM元素插入页面指定位置
    var container = document.getElementById('content-container');
    container.append(contentDiv);
    
    // 确保居中显示
    centerContent(contentDiv);
}

在上述程式碼中，我們先從contentData陣列中取出要載入的內容。然後，建立一個<div>元素作為內容的容器，在其中建立一個<img>元素用於展示內容。透過設定img元素的樣式，我們將內容進行縮放，保證其縱橫比並居中顯示。最後，透過append方法將內容插入到頁面指定位置。

為了保持載入的內容居中顯示，我們還需要定義一個函數centerContent(elem)。

function centerContent(elem) {
    // 获取父容器的宽度和高度
    var parentWidth = elem.parentNode.offsetWidth;
    var parentHeight = elem.parentNode.offsetHeight;
    
    // 获取内容的宽度和高度
    var contentWidth = elem.offsetWidth;
    var contentHeight = elem.offsetHeight;
    
    // 计算左边和上边的偏移量
    var leftOffset = (parentWidth - contentWidth) / 2;
    var topOffset = (parentHeight - contentHeight) / 2;
    
    // 设置居中样式
    elem.style.left = leftOffset + 'px';
    elem.style.top = topOffset + 'px';
}

在上述程式碼中，我們首先取得父容器的寬度和高度，以及內容的寬度和高度。然後，透過計算父容器和內容之間的偏移量，將內容置中顯示。最後，透過設定left和top樣式將內容放置到居中位置。

透過以上程式碼實現，當使用者捲動到頁面底部時會自動載入更多的內容，並對載入的內容進行縮放，保持其縱橫比和居中顯示。當然，我們也可以根據具體需求進行更多的樣式和功能的客製化。

以上是JavaScript 如何實現滾動到頁面底部自動載入的內容縮放並保持縱橫比和居中顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！