Question

我一直在尝试一些事情，以使更多的人习惯于Web开发。

我发现了一件很酷的事情； scrollIntoView（），可以平滑滚动到下一个id标签。

<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，但是这样做并不顺利吗？

任何帮助/评论都非常感谢。

i是在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>

为什么[scrollIntoView（）]滚动不流畅？

2 个答案: