화면 비율과 중앙 정렬을 유지하면서 페이지 하단으로 스크롤할 때 자동으로 로드되는 콘텐츠의 크기를 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

다음으로 콘텐츠를 로드하기 위한 loadMoreContent() 함수를 정의해야 합니다. 이 기능에서는 AJAX와 같은 기술을 사용하여 서버에서 콘텐츠를 동적으로 로드할 수 있습니다. 단순화를 위해 여기서는 로드할 콘텐츠를 저장하는 contentData 배열이 이미 있다고 가정합니다. 배열의 내용을 가져오고 표시할 DOM 요소를 동적으로 생성합니다.

rrreee

위 코드에서는 먼저 contentData 배열에서 로드할 콘텐츠를 검색합니다. 그런 다음 <div> 요소를 콘텐츠 컨테이너로 만들고 그 안에 <img alt="화면 비율과 중앙 정렬을 유지하면서 페이지 하단으로 스크롤할 때 자동으로 로드되는 콘텐츠의 크기를 JavaScript에서 어떻게 조정할 수 있나요?" > 요소를 만들어 콘텐츠를 표시합니다. <code>img 요소의 스타일을 지정하여 콘텐츠의 가로 세로 비율을 유지하고 중앙에 배치하도록 크기를 조정합니다. 마지막으로 append 메소드를 통해 페이지의 지정된 위치에 콘텐츠가 삽입됩니다. 🎜🎜로드된 콘텐츠를 중앙에 계속 표시하려면 centerContent(elem) 함수도 정의해야 합니다. 🎜rrreee🎜위 코드에서는 먼저 상위 컨테이너의 너비와 높이, 콘텐츠의 너비와 높이를 가져옵니다. 그런 다음 상위 컨테이너와 콘텐츠 사이의 오프셋을 계산하여 콘텐츠를 중앙에 배치합니다. 마지막으로 left 및 top 스타일을 설정하여 콘텐츠를 중앙에 배치합니다. 🎜🎜위 코드를 통해 사용자가 페이지 하단으로 스크롤하면 더 많은 콘텐츠가 자동으로 로드되며, 로드된 콘텐츠는 가로 세로 비율과 중앙 표시를 유지하도록 크기가 조정됩니다. 물론 특정 요구 사항에 따라 더 많은 스타일과 기능을 맞춤 설정할 수도 있습니다. 🎜

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