화면 비율과 중앙 정렬을 유지하면서 페이지 하단으로 스크롤할 때 자동으로 로드되는 콘텐츠의 크기를 JavaScript에서 어떻게 조정할 수 있나요?

JavaScript 콘텐츠 확대/축소를 자동으로 로드하고 화면 비율과 중앙 표시를 유지하기 위해 페이지 하단으로 스크롤하는 방법은 무엇입니까?

웹 개발에서는 사용자가 페이지 하단으로 스크롤할 때 자동으로 더 많은 콘텐츠를 로드해야 하는 경우가 있습니다. 로딩 프로세스 중에 아름다운 표시를 위해 콘텐츠의 크기를 조정해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 페이지 하단으로 스크롤할 때 콘텐츠를 자동으로 로드하고, 가로 세로 비율과 중앙 표시를 유지하면서 로드된 콘텐츠의 크기를 조정하는 방법을 소개합니다.

먼저 웹페이지의 스크롤 이벤트를 수신해야 합니다. 페이지 하단으로 스크롤하면 콘텐츠를 로드하는 기능이 실행됩니다. 예:

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

위 코드에서 window.innerHeight는 브라우저 창의 높이를 나타내고, window.scrollY는 스크롤 막대의 수직 오프셋을 나타냅니다. document.body.offsetHeight는 전체 페이지의 높이를 나타냅니다. 페이지 하단으로 스크롤하면 window.innerHeight + window.scrollY 값이 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

위 내용은 화면 비율과 중앙 정렬을 유지하면서 페이지 하단으로 스크롤할 때 자동으로 로드되는 콘텐츠의 크기를 JavaScript에서 어떻게 조정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!