为什么[scrollIntoView()]不能顺利滚动？
提问于 2020-07-03 08:07:15
我已经尝试了一些东西，以使更多的习惯网络开发。
我发现了一个很酷的东西: scrollIntoView()，它应该平滑地滚动到下一个id-标记。
<button type="button"
onclick="document.querySelector('#projects-overview')
.scrollIntoView({behavior: 'smooth'});">
Click Me!
</button>这将顺利滚动到dashboard.component.html中的id: projects概述：
<div class="grid-container">
<h1 id="projects-overview" class="mat-h1">Projects</h1>现在这起作用了，在某种意义上，它“去”了id，但是它不能顺利地做到这一点吗？
任何帮助/评论都是非常感谢的。
我是在一个棱角分明的项目和Chrome的最新版本中制作的
在这里可以找到片段：小提琴
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-07-06 05:44:56
我发现Chrome中有一个选项可以禁用/启用平滑滚动选项(我已经将其转换为默认选项，因此无法工作)。
若要在Chrome中启用平滑滚动，请转到:chrome://标志/#平滑滚动
现在一切顺利了。
此外，我发现有多种方法可以顺利滚动：
#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>Stack Overflow用户
发布于 2020-07-03 08:21:06
我测试了您的代码，从JavaScript中提取出的HTML解决了这个问题。
运行您的代码时在控制台中遇到的错误是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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62719087
复制相关文章
腾讯云开发者
