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

Question

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

Answer 1

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

如果用户代理尊重滚动行为属性并且以下之一为真：

• 行为为“自动”且元素不为空且其滚动行为属性的计算值是平滑的

• 行为流畅

...然后执行平滑滚动框到位置。否则，执行框的即时滚动到位置。

您的用户代理尊重该scroll-behavior属性；这意味着我们将检查两个条件之一。当您使用window.scroll({..., behavior: 'auto'})时，我们正在输入第一个条件。behavior我们设置的确实是，auto元素确实不是null，scroll-behavior属性的计算值确实是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>

Answer 2

如果您只需要支持 chrome 和/或 firefox，则可以使用未记录的“行为：即时”值来覆盖 css 设置的滚动行为，更多信息请参见https://github.com/mdn/content/issues/2719。示例：https ://jsfiddle.net/fr7m40kw/

document.querySelector('button').addEventListener('click', () => {

    const container = document.querySelector('.container')

    container.scrollTo({

    top: container.scrollTop + 100,

    behavior: 'instant'

  })

})

.container {

  height: 100px;

  overflow: auto;

  scroll-behavior: smooth;

}

.box {

  width: 100px;

  height: 50px;

  background: #AAD;

  margin-bottom: 10px;

}

<div class="container">

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

</div>

<button>

 Scroll

</button>