平滑滚动 Safari

概述

在 Safari 浏览器中实现平滑滚动功能，能够提升用户体验，让页面滚动更加自然流畅。

下面将介绍如何使用 JavaScript 来实现平滑滚动功能。

代码实现

// 获取所有需要平滑滚动的锚点链接
const smoothScrollLinks = document.querySelectorAll('a[href^="#"]');

// 循环遍历锚点链接
smoothScrollLinks.forEach(link => {
  // 绑定点击事件
  link.addEventListener('click', event => {
    // 取消默认跳转行为
    event.preventDefault();

    // 获取锚点名称
    const id = link.getAttribute('href').substring(1);

    // 获取目标元素
    const targetElement = document.getElementById(id);
    if (!targetElement) return;

    // 计算目标元素在文档中的位置
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const targetOffsetTop = targetElement.offsetTop;
    const offsetTop = targetOffsetTop - scrollTop;

    // 创建动画效果
    const duration = 500;
    const easing = t => t * (2 - t);
    const startTime = performance.now();
    requestAnimationFrame(function animate(currentTime) {
      const elapsedTime = currentTime - startTime;
      const progress = Math.min(elapsedTime / duration, 1);
      const t = easing(progress);

      window.scrollTo(0, scrollTop + offsetTop * t);

      if (progress < 1) requestAnimationFrame(animate);
    });
  });
});

实现原理

平滑滚动的实现主要依赖于两个 API：window.scrollTo() 和 requestAnimationFrame()。

window.scrollTo() 函数可以用于让页面滚动到指定位置。在本文实现中，我们需要让页面平滑滚动到目标元素的位置，因此我们需要计算出目标元素在文档中的位置（即距离文档顶部的距离），然后使用 window.scrollTo() 函数将页面滚动到该位置。

requestAnimationFrame() 函数用于创建动画效果，可以让页面滚动变得平滑流畅。在本文实现中，我们使用 requestAnimationFrame() 函数来不断更新页面滚动的位置，从而创建平滑流畅的滚动效果。同时，我们还使用了缓动函数来让滚动效果更加自然。缓动函数的作用是根据当前进度值计算出缓动后的进度值，从而让滚动速度不断变慢，让用户感觉更加自然舒适。

注意事项

• 平滑滚动功能只针对支持 JavaScript 的浏览器有效；
• 如果锚点链接的目标元素不存在，平滑滚动功能会失效。
• 动画效果的具体实现可以根据自己的需求调整，例如滚动时间、缓动函数等等。

结语

通过简单的 JavaScript 代码，我们可以轻松实现 Safari 浏览器中的平滑滚动功能，让用户体验更加顺畅自然。希望本文能对大家有所帮助，谢谢阅读！