Wie kann JavaScript Inhalte skalieren, die automatisch geladen werden, wenn zum Ende der Seite gescrollt wird, und dabei das Seitenverhältnis und die Zentrierung beibehalten?

JavaScript Wie erreicht man das Scrollen zum Ende der Seite, um den Inhaltszoom automatisch zu laden und das Seitenverhältnis und die zentrierte Anzeige beizubehalten?

Bei der Webentwicklung müssen wir manchmal automatisch mehr Inhalte laden, wenn der Benutzer zum Ende der Seite scrollt. Während des Ladevorgangs muss der Inhalt oft skaliert werden, um eine schöne Darstellung zu gewährleisten. In diesem Artikel erfahren Sie, wie Sie mithilfe von JavaScript Inhalte automatisch laden, wenn Sie zum Ende der Seite scrollen, und wie Sie die geladenen Inhalte skalieren und dabei das Seitenverhältnis und die zentrierte Anzeige beibehalten.

Zuerst müssen wir uns das Scroll-Ereignis der Webseite anhören. Beim Scrollen zum Ende der Seite wird eine Funktion zum Laden von Inhalten ausgelöst. Zum Beispiel:

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

Im obigen Code stellt window.innerHeight die Höhe des Browserfensters dar, window.scrollY stellt den vertikalen Versatz der Bildlaufleiste dar, document.body.offsetHeight stellt die Höhe der gesamten Seite dar. Beim Scrollen zum Ende der Seite ist der Wert von window.innerHeight + window.scrollY größer oder gleich dem Wert von document.body.offsetHeight. 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

rrreee

Das obige ist der detaillierte Inhalt vonWie kann JavaScript Inhalte skalieren, die automatisch geladen werden, wenn zum Ende der Seite gescrollt wird, und dabei das Seitenverhältnis und die Zentrierung beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!