javascript - Chrome 中的 onScroll 滚动To 行为平滑

Question

有人可以解释一下为什么 window.scrollTo 在 Chrome 中的 window.onscroll 事件中无法正常工作吗？ fiddle 中的示例使用 element.scrollIntoView 但行为是相同的。平滑滚动非常非常慢。

HTML

<div id="top"></div>
<div id="bottom">

CSS

*{
margin:0;
padding:0
} 

body {
background-image: radial-gradient(#166664 0%, #252233 80%);
}

#top {
height: 100vh;
background-color: rgba(255,255,255,0.3);
}

#bottom {
height: 1800px;
background-color: rgba(0,0,0,0.3);
}

JS

 window.addEventListener("scroll", function(event) {

    var bottomel = document.getElementById("bottom");
    var newscroll = window.pageYOffset;

    if (newscroll > 0) {
        bottomel.scrollIntoView({
            block: "start",
            behavior: "smooth"
        });
    } 
});

fiddle :https://jsfiddle.net/3doc8ap5/2/

Answer 1

您应该在滚动开始后删除监听器以避免多次执行:

function onScroll(event) {
  window.removeEventListener("scroll", onScroll);

  var bottomel = document.getElementById("bottom");
  var newscroll = window.pageYOffset;

  if (newscroll > 0) {
    bottomel.scrollIntoView({
      block: "start",
      behavior: "smooth"
    });
  }

  event.preventDefault();
};

window.addEventListener("scroll", onScroll);