垂直スクロールを許可しながら HTML 要素の X 軸の位置を修正するにはどうすればよいですか?

要素を X 軸のみに固定: スクロール時に水平位置を維持する

Web 開発では、要素を正確に配置することがユーザー エクスペリエンスとユーザー エクスペリエンスにとって重要です。美学。一般的なシナリオの 1 つは、要素を X 軸に固定したままにして、ユーザーの閲覧エクスペリエンスに合わせて垂直にスクロールさせることです。

質問:

問題を修正することは可能ですか? X 軸上の HTML 要素の位置のみ。ページ コンテンツとともに垂直方向にスクロールできますが、水平方向は維持されます。位置?

答え:

はい、CSS と JavaScript を組み合わせることでこれを実現できます。その方法は次のとおりです:

CSS:

要素の位置を絶対位置として定義し、その上部オフセットを指定します:

#my-element {
    position: absolute;
    top: 15px;
}

JavaScript:

jQuery を使用してイベント リスナーを追加しますウィンドウのスクロールイベントに。リスナー内で、現在のスクロール位置に基づいて要素の左の位置を調整します。

$(window).scroll(function() {
    $('#my-element').css({
        'left': $(this).scrollLeft()
    });
});

CSS では、要素がページの上部より上に位置するように、15 ピクセルの上部オフセットで要素を絶対的に配置します。 。 JavaScript コードは、ユーザーがスクロールしても要素の左オフセットが同じままになり、要素が水平方向に移動しないようにします。

注:

要素の左位置を維持するにはCSS で変更された場合でも、次の更新された JavaScript コードを使用できます。

var leftOffset = parseInt($("#my-element").css('left'));
$(window).scroll(function() {
    $('#my-element').css({
        'left': $(this).scrollLeft() + leftOffset
    });
});

このアプローチでは、初期値が取得されます。 CSS の左位置を取得してスクリプト内で使用し、その後の CSS の変更が JavaScript の動作に確実に反映されるようにします。

以上が垂直スクロールを許可しながら HTML 要素の X 軸の位置を修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。