Comment mettre à l'échelle le contenu qui se charge automatiquement lors du défilement vers le bas de la page en JavaScript tout en conservant les proportions et l'affichage centré ?

JavaScript Comment réaliser un défilement vers le bas de la page pour charger automatiquement le zoom du contenu et conserver les proportions et l'affichage centré ?

Dans le développement Web, nous devons parfois charger automatiquement plus de contenu lorsque l'utilisateur fait défiler vers le bas de la page. Pendant le processus de chargement, le contenu doit souvent être mis à l'échelle pour garantir un bel affichage. Cet article explique comment utiliser JavaScript pour charger automatiquement le contenu lors du défilement vers le bas de la page et pour mettre à l'échelle le contenu chargé tout en conservant ses proportions et son affichage centré.

Tout d'abord, nous devons écouter l'événement de défilement de la page Web. Une fonction qui charge le contenu est déclenchée lors du défilement vers le bas de la page. Par exemple :

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

Dans le code ci-dessus, window.innerHeight représente la hauteur de la fenêtre du navigateur, window.scrollY représente le décalage vertical de la barre de défilement, document.body.offsetHeight représente la hauteur de la page entière. Lors du défilement vers le bas de la page, la valeur de window.innerHeight + window.scrollY sera supérieure ou égale à la valeur de 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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!