为什么 [scrollIntoView()] 滚动不顺畅？

Question

我一直在尝试一些东西来适应网络开发。

我发现了一件很酷的事情； scrollIntoView()，它应该平滑滚动到下一个 id-tag。

<button type="button"
          onclick="document.querySelector('#projects-overview')
          .scrollIntoView({behavior: 'smooth'});">
    Click Me!
  </button>

这应该会平滑滚动到 id：dashboard.component.html 中的项目概述：

<div class="grid-container">
 <h1 id="projects-overview" class="mat-h1">Projects</h1>

现在这可行，从某种意义上说，它“去”到了 id，但它并没有顺利地做到这一点？

非常感谢任何帮助/cmets。

这是我在一个 Angular 项目中制作的，以及最新版本的 Chrome

可在此处找到 SNIPPET：FIDDLE

Answer 1

我测试了你的代码，从 HTML 中提取 JavaScript 解决了这个问题。

运行代码时我在控制台中遇到的错误是Cannot read property 'scrollIntoView' of null

const buttonEl = document.querySelector("#clickMe");
const scrollEl = document.querySelector("#scollToMe");

buttonEl.addEventListener("click", function () {
  scrollEl.scrollIntoView({
    behavior: "smooth"
  })
})

.scroll-el {
  margin-top: 200vh;
  background: red;
  height: 50px;
  width: 100%;
}

<button id='clickMe' type='button'>Click me</button>
<div class='scroll-el' id='scollToMe'></div>

Answer 2

我发现 Chrome 中有一个选项可以禁用/启用平滑滚动选项（我已将其设为默认设置，因此它不起作用。）

要在 Chrome 中启用平滑滚动，请访问：chrome://flags/#smooth-scrolling

现在一切顺利。

此外，我发现有多种方法可以平滑滚动：

#1：在 CSS 中：

html, body {
  height: 100%;
  scroll-behavior: smooth;
}

#2：在 HTML 本身中

  <button type="button"
      onclick="document.querySelector('#projects-overview')
      .scrollIntoView({behavior: 'smooth'});">
Click Me!
  </button>