How can JavaScript scale content that automatically loads when scrolling to the bottom of the page while maintaining aspect ratio and centering?

JavaScript How to implement scrolling to the bottom of the page to automatically load content that scales and maintains the aspect ratio and centered display?

In web development, sometimes we need to automatically load more content when the user scrolls to the bottom of the page. During the loading process, the content often needs to be scaled to ensure a beautiful display. This article will introduce how to use JavaScript to automatically load content when scrolling to the bottom of the page, and to scale the loaded content while maintaining its aspect ratio and centered display.

First, we need to listen to the scroll event of the web page. A function that loads content is triggered when scrolling to the bottom of the page. For example:

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

In the above code, window.innerHeight represents the height of the browser window, window.scrollY represents the vertical offset of the scroll bar, document.body.offsetHeight represents the height of the entire page. When scrolling to the bottom of the page, the value of window.innerHeight window.scrollY will be greater than or equal to the value of document.body.offsetHeight.

Next, we need to define the function to load content loadMoreContent(). In this function, we can dynamically load content from the server using technologies such as AJAX. For the sake of simplicity, here we assume that there is already an array contentData that stores the content to be loaded. We will get the contents of the array and dynamically create DOM elements for display.

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);
}

In the above code, we first take out the content to be loaded from the contentData array. Then, create a <div> element as a container for the content, and create an <code><img alt="How can JavaScript scale content that automatically loads when scrolling to the bottom of the page while maintaining aspect ratio and centering?" > element inside it to display the content. By styling the img element, we scale the content to maintain its aspect ratio and center it. Finally, insert the content into the specified location on the page through the append method.

In order to keep the loaded content displayed in the center, we also need to define a function 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';
}

In the above code, we first get the width and height of the parent container, and the width and height of the content. Then, the content is centered by calculating the offset between the parent container and the content. Finally, center the content by setting the left and top styles.

Through the above code, when the user scrolls to the bottom of the page, more content will be automatically loaded, and the loaded content will be scaled to maintain its aspect ratio and centered display. Of course, we can also customize more styles and functions according to specific needs.