巧用scroll-behavior和scrollIntoView，实现优雅的页面内导航，并解决iOS设备不兼容问题

2023-09-27 11:54:10

页面内导航的艺术：使用scroll-behavior和scrollIntoView API

在现代网络开发中，用户体验至关重要。网站应迅速响应、直观且易于使用。页面内导航是网站中不可或缺的元素，它允许用户在页面不同部分之间无缝跳转。scroll-behavior和scrollIntoView API是实现页面内导航的强大工具，它们可以使滚动平滑而优雅。

scroll-behavior简介

scroll-behavior CSS属性控制元素或整个文档的滚动行为。它有以下几个值：

auto： 使用浏览器的默认滚动行为（通常是立即跳到目标位置）。
smooth： 使滚动平滑过渡，为用户提供更愉悦的体验。

scrollIntoView简介

scrollIntoView方法是一个JavaScript方法，它使元素滚动到浏览器视口中。它接受一系列选项，包括：

behavior： 指定滚动行为（auto或smooth）。
block： 指定元素在视口中的位置（start、center或end）。
inline： 指定元素在视口中的对齐方式（start、center或end）。

使用scroll-behavior和scrollIntoView实现页面内导航

我们可以结合使用scroll-behavior和scrollIntoView来创建页面内导航。以下步骤演示了如何实现：

在HTML中，为导航链接添加一个指向目标元素的href属性。
在JavaScript中，监听导航链接的点击事件。
在点击事件处理程序中，使用scrollIntoView方法将目标元素滚动到视口中，并设置behavior为"smooth"。

<a href="#my-target-element">导航链接</a>

const links = document.querySelectorAll("a[href^='#']");

links.forEach((link) => {
  link.addEventListener("click", (e) => {
    e.preventDefault();
    const target = document.querySelector(link.getAttribute("href"));
    target.scrollIntoView({ behavior: "smooth" });
  });
});

解决iOS设备上的不兼容问题

在iOS设备上，scrollIntoView方法在某些情况下可能无法正常工作。这是因为iOS上的Safari浏览器对scrollIntoView的实现存在一些限制。为了解决这个问题，我们可以使用以下变通方法：

将目标元素包装在带有固定位置的父元素中。
使用requestAnimationFrame在浏览器渲染帧中多次调用scrollIntoView方法。

<div style="position: fixed;">
  <div id="my-target-element"></div>
</div>

const target = document.getElementById("my-target-element");

function scrollIntoViewWithRAF() {
  target.scrollIntoView({ behavior: "smooth" });
  requestAnimationFrame(scrollIntoViewWithRAF);
}

scrollIntoViewWithRAF();

常见问题解答