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

Als nächstes müssen wir die Funktion loadMoreContent() zum Laden von Inhalten definieren. In dieser Funktion können wir Inhalte mithilfe von Technologien wie AJAX dynamisch vom Server laden. Der Einfachheit halber gehen wir hier davon aus, dass es bereits ein Array contentData gibt, das den zu ladenden Inhalt speichert. Wir erhalten den Inhalt des Arrays und erstellen dynamisch DOM-Elemente zur Anzeige.

rrreee

Im obigen Code entnehmen wir zunächst den zu ladenden Inhalt dem Array contentData. Erstellen Sie dann ein <div>-Element als Container für den Inhalt und darin ein <img>-Element, um den Inhalt anzuzeigen. Durch die Gestaltung des img-Elements skalieren wir den Inhalt, um sein Seitenverhältnis beizubehalten und ihn zu zentrieren. Schließlich wird der Inhalt über die Methode append an der angegebenen Stelle auf der Seite eingefügt. 🎜🎜Um den geladenen Inhalt in der Mitte anzuzeigen, müssen wir außerdem eine Funktion centerContent(elem) definieren. 🎜rrreee🎜Im obigen Code ermitteln wir zunächst die Breite und Höhe des übergeordneten Containers sowie die Breite und Höhe des Inhalts. Anschließend wird der Inhalt zentriert, indem der Versatz zwischen dem übergeordneten Container und dem Inhalt berechnet wird. Zentrieren Sie abschließend den Inhalt, indem Sie die Stile left und top festlegen. 🎜🎜Durch den obigen Code werden automatisch mehr Inhalte geladen, wenn der Benutzer zum Ende der Seite scrollt, und der geladene Inhalt wird skaliert, um sein Seitenverhältnis und die zentrierte Anzeige beizubehalten. Natürlich können wir auch weitere Stile und Funktionen entsprechend den spezifischen Anforderungen anpassen. 🎜

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!