使用 `scrollIntoView` 与固定头部的技巧

在现代 Web 应用中，滚动是无处不在的功能。有时，我们需要在页面上根据用户交互或其他条件自动滚动到特定元素。而当页面有固定的头部导航时，滚动到该元素后可能会被头部遮盖。在这种情况下，我们可以使用 scrollIntoView 方法和一些技巧来解决这个问题。

scrollIntoView 简介

scrollIntoView 是 DOM 元素的一个方法，它可以将当前元素滚动到浏览器窗口的可见区域内。例如，以下代码将让具有 ID "my-element" 的元素滚动到浏览器窗口的顶部：

document.getElementById("my-element").scrollIntoView();

scrollIntoView 还接受一个可选参数 options，允许你指定滚动的行为，例如以平滑方式滚动、滚动到元素的特定位置等。更多信息请参阅 MDN 文档。

固定头部的问题

当页面存在固定的头部导航时，使用 scrollIntoView 可能会出现以下问题：

• 目标元素被头部遮盖
• 头部导航被目标元素遮盖

为了解决这些问题，我们需要调整滚动的目标位置。下面是一种基于固定头部高度的技巧：

1. 获取固定头部的高度：

const header = document.querySelector("header");
const headerHeight = header.getBoundingClientRect().height;

1. 对目标元素使用 scrollIntoView 方法，并指定滚动行为为到顶部对齐：

const targetElement = document.getElementById("my-element");
targetElement.scrollIntoView({
  behavior: "auto",
  block: "start",
});

1. 滚动后调整滚动位置：

window.scrollBy(0, -headerHeight);

完整代码示例：

-- -------------------- ---- -------
--------- -----
------
  ------
    -------
      ------ -
        --------- ------
        ---- --
        ----- --
        ------ -----
        ------- -----
        ----------------- -----
      -
      -------- -
        ----------- ------ -- -------- - ---- ---------- ---- --
      -
    --------
  -------
  ------
    -----------------------
    ---- ----------------
      ------- --------------
      ---- --- ------ ------- ---
      --- ---------------------- ------------
      ------- --------------
    ------
    --------
      ----- ------ - ---------------------------------
      ----- ------------ - --------------------------------------

      ----- ------------- - --------------------------------------
      ------------------------------
        --------- -------
        ------ --------
      ---

      ------------------ ---------------
    ---------
  -------
-------

结论

使用 scrollIntoView 和一些技巧，我们可以解决在存在固定头部的页面中自动滚动到特定元素的问题。这对于增强用户体验和导航非常有用。当然，如果你需要支持各种设备和浏览器，可能需要一些额外的处理，例如检测浏览器窗口大小、切换横向或纵向滚动等。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/29157