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

Question

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

我能做些什么？

Answer 1

您可以将容器滚动的内联样式设置为，然后通过以编程方式更改滚动前后auto的值来恢复更改。html.style.scrollBehaviorJS 的ScrollToOptions键值behavior对不能覆盖 CSS 的scroll-behavior.&nbsp;CSSOM草案提到了这一点：如果用户代理尊重滚动行为属性并且以下之一为真：• 行为为“自动”且元素不为空且其滚动行为属性的计算值是平滑的• 行为流畅...然后执行平滑滚动框到位置。否则，执行框的即时滚动到位置。您的用户代理尊重该scroll-behavior属性；这意味着我们将检查两个条件之一。当您使用window.scroll({..., behavior: 'auto'})时，我们正在输入第一个条件。behavior我们设置的确实是，auto元素确实不是null，scroll-behavior属性的计算值确实是smooth。因此，将发生平滑滚动。要使条件为假，我们可以使用内联样式覆盖scroll-behavior属性的计算值。auto这是一个简单的例子。通过单击按钮以编程方式滚动而没有流畅的行为Scroll down 200。通过单击链接平滑滚动。function scrollNoSmooth() {&nbsp; // Setting inline style of scroll-behavior to 'auto' temporarily&nbsp; html.style.scrollBehavior = 'auto'&nbsp;&nbsp;&nbsp; // This 'behavior' cannot override the CSS 'scroll-behavior'&nbsp; // Do scroll&nbsp; window.scroll({&nbsp; &nbsp; top: window.scrollY + 200,&nbsp; &nbsp; left: 0,&nbsp; &nbsp; // behavior: 'smooth'&nbsp; })&nbsp;&nbsp;&nbsp; // Reverting inline style to empty&nbsp; html.style.scrollBehavior = ''}const html = document.querySelector('html')const fixed = document.querySelector('.fixed')fixed.addEventListener('click', scrollNoSmooth)html {&nbsp; scroll-behavior: smooth;&nbsp; position: relative;}a {&nbsp; display: block;&nbsp; height: 400px;&nbsp; width: 100%;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;}.fixed {&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; position: fixed;&nbsp; width: 150px;&nbsp; height: 50px;&nbsp; border-radius: 5px;&nbsp; background: #121212;&nbsp; color: white;&nbsp; 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>

Answer 2

如果您只需要支持 chrome 和/或 firefox，则可以使用未记录的“行为：即时”值来覆盖 css 设置的滚动行为，更多信息请参见https://github.com/mdn/content/issues/2719。示例：https ://jsfiddle.net/fr7m40kw/document.querySelector('button').addEventListener('click', () => {&nbsp; &nbsp; const container = document.querySelector('.container')&nbsp; &nbsp; container.scrollTo({&nbsp; &nbsp; top: container.scrollTop + 100,&nbsp; &nbsp; behavior: 'instant'&nbsp; })}).container {&nbsp; height: 100px;&nbsp; overflow: auto;&nbsp; scroll-behavior: smooth;}.box {&nbsp; width: 100px;&nbsp; height: 50px;&nbsp; background: #AAD;&nbsp; margin-bottom: 10px;}<div class="container">&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div>&nbsp; <div class="box"></div></div><button>&nbsp;Scroll</button>