javascript - 如何在 JavaScript 中使用 scrollTo 覆盖 CSS 滚动行为

Question

我默认滚动平滑，但对于一个 JavaScript scrollTo() 命令，我想覆盖 CSS 的“平滑”行为并使用 auto，但 JS 不会覆盖 CSS。

我能做什么？

Answer 1

您可以将容器滚动的内联样式设置为 auto，然后通过以编程方式在滚动前后更改 html.style.scrollBehavior 的值来恢复更改。 JS的ScrollToOptions的 behavior 键值对不能覆盖 CSS 的 scroll-behavior。 CSSOM draft提到这一点:

If the user agent honors the scroll-behavior property and one of the following are true:

• behavior is "auto" and element is not null and its computed value of the scroll-behavior property is smooth

• behavior is smooth

...then perform a smooth scroll of box to position. Otherwise, perform an instant scroll of box to position.

您的用户代理尊重 scroll-behavior 属性；这意味着我们将检查两个条件之一。当您使用 window.scroll({..., behavior: 'auto'}) 时，我们正在输入第一个条件。我们设置的behavior确实是auto，element确实不是null，scroll-behavior的计算值code> 属性确实是 smooth。因此，将发生平滑滚动。要使条件为假，我们可以使用内联样式将 scroll-behavior 属性的计算值覆盖为 auto。

这是一个简单的例子。通过单击 Scroll down 200 按钮以编程方式滚动，但行为不流畅。通过点击链接平滑滚动。

function scrollNoSmooth() {
  // Setting inline style of scroll-behavior to 'auto' temporarily
  html.style.scrollBehavior = 'auto'
  
  // This 'behavior' cannot override the CSS 'scroll-behavior'
  // Do scroll
  window.scroll({
    top: window.scrollY + 200,
    left: 0,
    // behavior: 'smooth'
  })
  
  // Reverting inline style to empty
  html.style.scrollBehavior = ''
}

const html = document.querySelector('html')
const fixed = document.querySelector('.fixed')

fixed.addEventListener('click', scrollNoSmooth)

html {
  scroll-behavior: smooth;
  position: relative;
}

a {
  display: block;
  height: 400px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fixed {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 150px;
  height: 50px;
  border-radius: 5px;
  background: #121212;
  color: white;
  cursor: pointer;
}

<div class="fixed">Scroll down 200</div>
<a name="A" href="#B">A</a>
<a name="B" href="#C">B</a>
<a name="C" href="#A">C</a>