如何立即滚动到位置？

Question

启用平滑滚动后，如何使用 JavaScript 立即将窗口滚动到某个位置？:root {    scroll-behavior: smooth;}有没有办法忽略这个 CSS 规则？像这样的东西：window.scrollBy({ top: 0, behavior: 'instantly' });

Answer 1

你去：

window.scrollTo({

  top: 0,

  left: 0,

  behavior: 'instant',

});

Answer 2

也许你可以scroll-behavior在调用之前设置.scrollBy()，然后在之后重置它。

var root = document.querySelector(':root');

var btnInstantScroll = document.querySelector('#btnInstantScroll');

var btnDefaultScroll = document.querySelector('#btnDefaultScroll');

btnInstantScroll.addEventListener('click', function() {

  // Change scroll behavior

  root.setAttribute("style", "scroll-behavior: auto;");

  // Timeout ensures styles are applied before scrolling

  setTimeout(function() {

    window.scrollBy(0, -2000);

    

    // Reset to CSS defaults.

    root.removeAttribute("style");

  }, 0)

})

btnDefaultScroll.addEventListener('click', function() {

  window.scrollBy(0, -2000);

})

:root {

  scroll-behavior: smooth;

}

.scrollable {

  height: 2000px;

  background: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);

}

.controls {

  padding: 15px;

  position: fixed;

  bottom: 0;

}

<div class="scrollable">

</div>

<div class="controls">

  <button type="button" id="btnInstantScroll">

    Instant scroll

  </button>

  <button type="button" id="btnDefaultScroll">

    Scroll using doc settings

  </button>

</div>

Answer 3

 scroll-behavior: auto; 不工作。并且 scroll-behavior: instant; 不再存在

这是唯一对我有用的东西：

html {

  scroll-behavior: auto !important;

}