JavaScript では、アスペクト比と中央揃えを維持しながら、ページの一番下までスクロールするときに自動的に読み込まれるコンテンツをどのように拡大縮小できるのでしょうか?

JavaScript ページの下部へのスクロールを実装して、アスペクト比と中央表示を維持して拡大縮小するコンテンツを自動的に読み込むにはどうすればよいでしょうか?

Web 開発では、ユーザーがページの一番下までスクロールしたときに、さらに多くのコンテンツを自動的に読み込む必要がある場合があります。読み込みプロセス中に、美しく表示されるようにコンテンツを拡大縮小する必要があることがよくあります。この記事では、JavaScript を使用して、ページの一番下までスクロールしたときにコンテンツを自動的に読み込み、読み込まれたコンテンツをアスペクト比と中央表示を維持したまま拡大縮小する方法を紹介します。

まず、Web ページのスクロール イベントをリッスンする必要があります。ページの一番下までスクロールすると、コンテンツをロードする関数がトリガーされます。例:

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 の値以上になります。

次に、コンテンツをロードする関数 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 配列から取り出します。次に、コンテンツのコンテナとして

要素を作成し、その中にコンテンツを表示するための 要素を作成します。 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 スタイルを設定してコンテンツを中央に配置します。

上記のコードにより、ユーザーがページの一番下までスクロールすると、さらに多くのコンテンツが自動的に読み込まれ、読み込まれたコンテンツはアスペクト比と中央表示を維持するために拡大縮小されます。もちろん、特定のニーズに応じて、さらに多くのスタイルや機能をカスタマイズすることもできます。

以上がJavaScript では、アスペクト比と中央揃えを維持しながら、ページの一番下までスクロールするときに自動的に読み込まれるコンテンツをどのように拡大縮小できるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。