CSS 为什么 scroll-behavior:smooth 不起作用而 javascript window.scroll smooth 起作用

在本文中，我们将介绍为什么在某些情况下 CSS 的 scroll-behavior: smooth 属性不起作用而使用 JavaScript 中的 window.scroll 方法平滑滚动生效的原因。

阅读更多：CSS 教程

1. CSS 中的 scroll-behavior: smooth

CSS 中的 scroll-behavior: smooth 属性被用来为网页中的滚动行为提供平滑过渡效果。当我们在 CSS 中使用该属性时，期望页面滚动时会有缓慢或平滑的滚动效果。

下面是一个使用 CSS 的 scroll-behavior: smooth 属性的例子：

html {
  scroll-behavior: smooth;
}

在上述示例中，我们将 scroll-behavior: smooth 应用于 HTML 元素，这意味着整个页面上的滚动会以平滑的方式进行。

2. JavaScript 中的 window.scroll 方法

相比之下，JavaScript 中的 window.scroll 方法提供了更灵活和可定制的滚动行为控制。通过使用 JavaScript，我们可以自定义滚动时的速度、缓动和其他动画效果。

下面是一个使用 JavaScript 的 window.scroll 方法来实现平滑滚动的例子：

function smoothScroll(target, duration) {
  var targetElement = document.querySelector(target);
  var targetPosition = targetElement.offsetTop;
  var startPosition = window.pageYOffset;
  var distance = targetPosition - startPosition;
  var startTime = null;

  function animation(currentTime) {
    if (startTime === null) startTime = currentTime;
    var timeElapsed = currentTime - startTime;
    var run = ease(timeElapsed, startPosition, distance, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) requestAnimationFrame(animation);
  }

  function ease(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
  }

  requestAnimationFrame(animation);
}

var button = document.querySelector('.scroll-button');
button.addEventListener('click', function() {
  smoothScroll('.scroll-section', 1000);
});

在上述 JavaScript 代码示例中，我们定义了一个名为 smoothScroll 的函数，它使用 window.scroll 方法和 requestAnimationFrame 来实现平滑滚动。这样，我们可以通过点击一个按钮来触发平滑滚动到指定的节段。

3. 原因分析

尽管 CSS 中的 scroll-behavior: smooth 属性应该能够提供平滑滚动的效果，但在某些情况下可能会失效。以下是一些可能导致 scroll-behavior: smooth 不起作用的原因：

兼容性问题：某些浏览器可能不完全支持该属性，尤其是老版本的浏览器。这可能导致平滑滚动效果在这些浏览器中无法生效。
元素位置变化：如果页面中的元素在滚动时发生位置变化，例如通过动画或 JavaScript 来修改元素位置，那么 scroll-behavior: smooth 属性可能不会作用于这些动态改变的元素。
嵌套滚动区域：如果在页面上存在嵌套滚动区域，例如滚动容器内部还有一个滚动容器，那么 scroll-behavior: smooth 可能无法正常工作。
其他 CSS 属性干扰：scroll-behavior: smooth 被其他 CSS 属性或样式规则所覆盖或干扰，可能导致滚动行为不平滑或失效。

相比之下，JavaScript 中的 window.scroll 方法提供了更强大的滚动控制能力，可以通过编写自定义的滚动函数来实现精准控制和动画效果。

4. 示例说明

虽然 scroll-behavior: smooth 属性在某些情况下可能不起作用，但我们可以通过使用 JavaScript 的 window.scroll 方法来实现平滑滚动的效果。例如，在一个单页网站中，我们可以通过点击导航栏中的链接或按钮来触发平滑滚动到相关节段的效果。

下面是一个可以在 JavaScript 中实现平滑滚动的示例代码：

function smoothScroll(target, duration) {
  var targetElement = document.querySelector(target);
  var targetPosition = targetElement.offsetTop;
  var startPosition = window.pageYOffset;
  var distance = targetPosition - startPosition;
  var startTime = null;

  function animation(currentTime) {
    if (startTime === null) startTime = currentTime;
    var timeElapsed = currentTime - startTime;
    var run = ease(timeElapsed, startPosition, distance, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) requestAnimationFrame(animation);
  }

  function ease(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
  }

  requestAnimationFrame(animation);
}

var button = document.querySelector('.scroll-button');
button.addEventListener('click', function() {
  smoothScroll('.scroll-section', 1000);
});

在上述示例中，我们定义了一个名为 smoothScroll 的函数，使用 window.scroll 方法和 requestAnimationFrame 来实现平滑滚动。我们通过给按钮添加点击事件监听器，当按钮被点击时，会触发 smoothScroll 函数并滚动到指定的节段，以达到平滑滚动的效果。