问题标签 [js-scrollintoview]

有没有办法Element.scrollIntoView()通过定义的过渡动画来调整滚动速度behavior: "smooth"。不知何故，滚动在 Chrome 中太慢了，但在 Firefox 中很好。

我正在制作一本俄语词典，其中将关键字条目插入到手风琴元素中。手风琴内部的信息取自 PHPmyadmin 数据库。到目前为止一切顺利：我设法设置了数据库和手风琴机制，因此，每当我向数据库添加新信息时，新内容都会正确调整到 index.php 页面。

但是，如果我单击屏幕底部的手风琴项，我需要手动向下滚动到包含关键字定义的内容框。如下：

这是我的缩写代码：

CSS：

HTML/PHP

Javascript：

在if声明中我尝试输入accItem[i].scrollIntoView();，但没有用。无论我在网上找到什么，scrollIntoview 命令都是关于通过单击其他地方的导航按钮滚动到给定的 id。我只想让屏幕自动向下滚动到刚刚单击的手风琴项。我不需要任何动画或平滑过渡。

提前谢谢你的帮助。

它应该很简单，但从昨天开始，我试图在页面上平滑滚动。滚动功能有效，但不是平滑滚动。

我试过 : scrollIntoView({behavior: 'smooth'})，但它不起作用。

这是我的 html 组件

还有我的 TS 组件

在反应应用程序中，我试图在单击按钮时呈现新的 DOM 元素后滚动到 DOM 元素。但是卷轴第一次不起作用。

滚动必须在状态变量更改后发生。因此，我将代码放入回调中。

我正在设置一个表单，用户将能够在单击按钮时看到他们选择的单选按钮（特定值）。

我能够获得单选按钮焦点并使页面滚动到它，但希望父级panel-body能够像关注页面一样scrollintoview()但那不起作用。

.parents(".panel-body")在不工作之前也使用过.focus().. ``

上面的代码只使单选按钮成为焦点......当不使用 .parents(".panel-body")......我希望整个 div 都在可见框架中

我试图在第一次使用延迟加载加载页面时显示一个组件，该组件仅在视图中加载内容时才加载。例如： - 页面上有 10 个组件，我想在第一次加载时显示/滚动到组件编号 7，并使用延迟加载（以提高性能）。

我该如何正确地做到这一点？这里的挑战是因为这些组件是延迟加载的，并且有巨大的图像会弄乱 scrollIntoView() 并且滚动太多到顶部通过组件。

• 我已经尝试过这些方法，但没有运气:(
• 引用组件 7：
  1. 通过 scrollIntoView() 滚动到该组件。使用 window.scrollBy(0, -100) 作为导航栏。
  2. 获取组件 offsetTop 并使用 window.scrollTo(0, targetComponent.offsetTop - 100);
  3. 上述两种方法，但 setTimeout 为 2s - 5s 也不起作用。
  4. 使用 scrollIntoView() 滚动到组件，使用 setTimeout 等待几秒钟，然后再次使用 scrollIntoView() 和 window.scrollBy(0, -100) 也不起作用。
  5. 给图像容器一个固定的高度（即：500px），这样延迟加载的图像会填满容器，但是如果该组件在其他页面上使用得到更大尺寸的图像（即：1200px）会弄乱UI .
  6. window.scrollY、window.pageYOffset、getBoundingClientRect().top 以及这些用于获得我需要的高度的值与从代码的 console.log 与浏览器值进行比较的代码不同，因此我的计算不正确。
  7. scrollIntoView({ block: 'start' }) 和 window.scrollBy(0, -100) 也不起作用。即使我使用了 window.scrollBy(0, -100)，它也滚动到顶部并通过了导航栏。也尝试了 setTimeout 。

我尝试过这样的事情，但组件仍然滚动到顶部太多。

我希望页面在第一次访问时在导航栏下方显示组件（大约 100 像素高）。我已经寻找解决方案并尝试了不同的方法，但仍然坚持这一点。

我是否错过了让此功能 scrollIntoView 与延迟加载内容一起使用的东西？谢谢！！

我只在 Chrome 浏览器上遇到这个奇怪的问题。我scrollIntoView在页面加载后使用方法（角度组件的ngAfterViewInit）。因此，当页面加载并滚动到元素时，一切都很好。现在，当我按下 TAB 键时，焦点从 Chrome 上 scrollIntoView 元素的下一个元素开始。在其他浏览器上，焦点从 DOM 的第一个元素开始。

有没有办法让焦点应该从 DOM 的第一个元素开始，即使在页面加载上使用 scrollIntoView 之后

问题可以在这里重现 - https://scrollintoview-issue.stackblitz.io/

• 在 Chrome 中打开链接，然后按 TAB
• 在 Firefox 或 Edge 中打开它并按 TAB
• 注意焦点从哪里开始的区别

预期 - 在 Chrome 上，焦点不应从 scrollIntoView 元素的下一个元素开始。它应该从 DOM 中的第一个元素开始

实际 - 焦点从页面加载时 scrollIntoView'ed 元素的下一个元素开始。

我正在使用 Javascript scrollIntoView 函数来滚动容器，以便当前处于焦点的元素出现在容器的中心。

我正在使用 addEventListener 来监听箭头键以更改我想要聚焦的元素，然后启动 scrollIntoView 以滚动到当前聚焦的元素。

如果我慢慢改变焦点元素，这很好用，但如果我开始快速改变焦点元素，滚动“几乎”停止并等到我停止改变焦点元素，然后该元素将在容器中居中。

这只发生在 Google Chrome 上，我在 Firefox 中对其进行了测试，无论我多快更改焦点元素，它都能正常工作。

建议不必与其他浏览器兼容，也可以更改谷歌浏览器设置来解决这个问题，因为这只是本地个人使用，我只会使用谷歌浏览器运行它。

可能的问题

虽然我不确定，但我认为 Google Chrome 处理 scrollIntoView 的方式与例如 Firefox 不同。当我快速调用它并且上一个滚动尚未完成时，它会在执行过程中停止上一个 scrollIntoView，这会使元素不在容器中居中，然后再次调用 scrollIntoView 并再次计算以找出当前滚动位置以及需要滚动多少才能使当前聚焦的元素位于容器的中心。如果进行了多次调用，则只有最后一次调用 scrollIntoView 调用被完全执行，这意味着没有完全完成 scrollIntoView 调用是导致滚动滞后的原因。

scrollIntoView 选项：

我测试我的代码的浏览器：

Chrome 版本：76.0.3809.100（滞后）

火狐版本：68.0.2（流畅）

我试图让以下代码工作，但它没有：

这就是说：对于我的表单中的每个输入和选择，添加一个事件侦听器来侦听“无效”状态（如果任何输入或选择无效，则在提交表单时触发）。事件侦听器将以流畅的动画滚动输入或选择页面中心的视图。

但它既不滚动到页面中心也不平滑。我的输入和选择会立即滚动到页面顶部。

向事件侦听器添加控制台日志告诉我事件侦听器正在响应，并且“this”确实指的是正确的输入或选择：

那么为什么这对我不起作用？

编辑：

这是 HTML 部分：

这是一个演示问题的 JSFiddle：

https://jsfiddle.net/gib65/j1ar87yq/

我想向右滚动到一列。这是我尝试过的：

这适用于垂直滚动，但不适用于水平滚动。