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

Ensuite, nous devons définir la fonction loadMoreContent() pour charger le contenu. Dans cette fonction, nous pouvons charger dynamiquement du contenu depuis le serveur en utilisant des technologies telles que AJAX. Par souci de simplicité, nous supposons ici qu'il existe déjà un tableau contentData qui stocke le contenu à charger. Nous obtiendrons le contenu du tableau et créerons dynamiquement des éléments DOM à afficher.

rrreee

Dans le code ci-dessus, nous retirons d'abord le contenu à charger du tableau contentData. Ensuite, créez un élément <div> en tant que conteneur pour le contenu, puis créez un élément <img> à l'intérieur pour afficher le contenu. En stylisant l'élément img, nous mettons à l'échelle le contenu pour conserver ses proportions et le centrons. Enfin, le contenu est inséré à l'emplacement spécifié sur la page via la méthode append. 🎜🎜Afin de garder le contenu chargé affiché au centre, nous devons également définir une fonction centerContent(elem). 🎜rrreee🎜Dans le code ci-dessus, nous obtenons d'abord la largeur et la hauteur du conteneur parent, ainsi que la largeur et la hauteur du contenu. Ensuite, le contenu est centré en calculant le décalage entre le conteneur parent et le contenu. Enfin, centrez le contenu en définissant les styles left et top. 🎜🎜Grâce au code ci-dessus, davantage de contenu sera automatiquement chargé lorsque l'utilisateur fera défiler vers le bas de la page, et le contenu chargé sera mis à l'échelle pour conserver son rapport hauteur/largeur et son affichage centré. Bien entendu, nous pouvons également personnaliser davantage de styles et de fonctions en fonction de besoins spécifiques. 🎜

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!