如何在允許垂直滾動的同時修復 HTML 元素的 X 軸位置？

僅在X 軸上修復元素：在滾動時保留水平位置

在Web 開發中，精確定位元素對於用戶體驗和體驗至關重要美學。常見的情況是元素保持固定在 x 軸上，但隨著使用者的瀏覽體驗垂直滾動。

問題：

是否可以修復HTML 元素僅在 x 軸上的位置，允許其隨頁面內容垂直滾動，但保持其水平位置？

答案：

是的，可以透過 CSS 和 JavaScript 的組合來實現這一點。操作方法如下：

CSS:

將元素的位置定義為絕對位置並指定其頂部偏移量：

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

JavaScript:

使用jQuery，新增事件監聽器視窗的捲動事件。在監聽器中，根據目前捲動位置調整元素的左側位置：

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

在 CSS 中，我們將元素絕對定位為頂部偏移 15px，以確保它保持在頁面頂部上方。 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中文網其他相關文章！