问题标签 [js-scrollintoview]

当我scrollIntoView()通常使用滚动到页面上的选定元素时，效果很好。

但我想要做的是单击一个打开可折叠元素的按钮（从而使页面更高），然后scrollIntoView()到该可折叠元素的顶部。

当我尝试添加该功能时，第一次单击时滚动只是“抖动”或闪烁了一下，第二次单击时它滚动到可折叠的中间。

我怎样才能解决这个问题？

我尝试scrollIntoView()在延迟 10 秒后执行，出现同样的不良行为。

抱歉，不能分享代码，因为它不属于我。

在 Google Chrome 中，element.scrollIntoView()withbehavior: 'smooth'不能同时在多个容器上工作。一旦在一个容器上触发平滑滚动，第二个容器就会停止滚动。在 Firefox 中，这个问题不存在；两个容器可以同时滚动。

我的解决方法是使用behavior: 'instant'，但我喜欢使用behavior: 'smooth'以获得更好的用户体验。

例子

这是一个使用 Angular 的 plunker

html

打字稿

我的网站有以下代码：

这很好用，但我有一个固定的标题，所以当代码滚动到元素时，标题会挡住。

有没有办法进行偏移并使其平滑滚动？

解释起来有点棘手，因此了解问题的最简单方法可能是访问网站并比较 Firefox（按预期完美运行）和 chrome（scrollIntoView 不起作用）之间的行为。

基本上，我有一个左栏菜单，但我不想放置一个位置：固定，所以它是一个带有浮动的相对菜单。所以主要内容的滚动是overflow-y on 。

现在，我有一个“欢迎”图像，它占据了访问者的所有屏幕高度。我创建的行为是当访问者向下滚动时，它直接到图像的末尾。当访问者位于图像下方并向上滚动一点时，它会直接转到图像的顶部。除此之外，文本中的滚动工作正常。

Firefox 一切正常，但 Chrome 没有按预期滚动到视图中。查看上面链接的网站中的 scroll.js 文件，console.log 显示 chrome 正在捕获滚轮事件并进入 scrollIntoView 但不滚动。

这是我应该报告的 chrome 错误吗？

谢谢

我有一个带有评论部分的反应应用程序。用户可以评论 pdf、图像、excel 和 csv 文件。当用户打开一个项目时，我希望带有注释的容器滚动到最底部。如果评论只是文本，则该功能可以完美运行。但是，当有人在其中添加任何类型的文件时，它将不再一直滚动到底部。它只滚动大约 3/4，添加的文件越多，滚动的越少。

这就是它的名字：

这是我的渲染中的内容：

涉及文件时，如何使滚动正常工作？

我正在使用 Angular 5 并有一个表，我在其中使用 *ngFor 创建表行，并给它们一个 id，即用户名。

我还有一个输入字段，我可以在其中收听更改并希望通过用户名搜索用户并滚动到该表行。

onSearchChange 函数看起来像这样

当我在浏览器中时，这很好用，但是当我进入响应式视图并低于 1200px 宽度时，它会停止工作。当它找到用户时，它仍然会向上/向下跳跃，但不会滚动到用户。

有什么我想念的吗？这是正常行为吗？如果是在较小的设备上时如何滚动到元素？

我的功能有点问题scrollIntoView。确实，它不起作用:(

这是我的代码：

• HTML

  /li>

• JS

  /li>

有人知道出了什么问题吗？非常感谢！

从文档中，有一个 Refs 的用例：

Triggering imperative animations.

有人可以提供一个应该如何完成的例子吗？在使用 Ref 将其滚动到视图后，我试图将用户的注意力吸引到 div 上，我认为这可能是一个理想的用例，也许？

我有一个网页（使用 HTML、CSS、JavaScript、PHP）并想编写一些脚本来将我的页面滚动到其中的一个元素。

这很好用（当我单击按钮时，页面滚动到search_cont元素视图：

然而，这东西并没有做任何事情：

我的问题是，为什么这不起作用，我该如何解决？或者（替代问题），如何以另一种方式滚动（在页面加载后）到页面上的某个元素？- 不使用（可见）按钮，我必须点击。

我将非常感谢您的回复。

我正在使用 vanilla JS 让按钮平滑地向下滚动到 div 元素（以 id 为目标）

我有这个作为我的代码：

在所有其他浏览器中，这会平滑滚动到该部分。在 Edge 中，它只是跳转到它。我需要更改什么才能使其平滑向下滚动到该部分