问题标签 [js-scrollto]

我尝试了几种向表格添加滚动的方法，但其中只有一种可以正常工作。他们之间有什么不同？

第一的：

第二：

第三：

第四：

一位同事实现了一个 ScrollToTop 组件，它有：

在某些情况下简单地将页面滚动到顶部。

但是，在运行测试时，测试会定期出错，并显示未实现：window.scrollTo（底部的完整错误堆栈）。

我知道 window.scrollTo 在节点上下文或开玩笑测试中不存在。如何抑制在非浏览器上下文中滚动的尝试？或者我应该如何开玩笑地处理这个全局？

我在 React Js 中制作了一个网页，其中一个部分包含大量图像，导致滚动运行 1 fps，这使得用户体验非常糟糕。

滚动在 safari 和 chrome 上都很好用，所以我不明白为什么 Firefox 这么慢？似乎 Firefox 通常不擅长一次渲染大量图像。我使用此解决方案中的此代码跨浏览器 JavaScript（不是 jQuery ...）滚动到顶部动画

css

您可以在下面看到 HTML 已呈现。

正在使用的滚动功能在许多其他页面上使用，它工作正常。如果我删除员工的节点，滚动功能效果很好。有人暗示为什么 Firefox 如此滞后而 safari 和 chrome 运行良好？

滚动功能

当我有一个.sections包含多个.section元素的容器并设置滚动捕捉时，它只有在我给该部分提供 100vh 的固定高度时才会起作用。没有高度，滚动捕捉将不起作用。这很好，除了没有固定高度，scrollTo工作正常，当我将高度添加到部分时，scrollTo不再工作。

这是一个例子。您可以在 CSS 中注释掉该height: 100vh;行，.section并看到单击任意位置将向下滚动到第 3 部分，但打开高度后，它不会滚动。

我已经尝试到console.log它滚动到的位置并且它是正确的，但是滚动实际上从未发生过。关于为什么这不是我想要的方式的任何想法？

注意：我在最新的 Chrome 中看到了这种行为。我还没有测试过其他浏览器。

如果单击表单中的提交按钮，如果存在错误，它应该自动滚动到第一个验证错误。我读过我可以为此使用“scrolltoview”，但我不知道具体如何。

我已经用一个简单的 ScrollTo (0.0) 尝试了它，以便在出现错误时简单地向上滚动并且它工作得很好。但是，这不是我想要的解决方案。

我目前在我的投资组合网站中使用Gridsome。但是，当我在移动/平板设备上的页面底部比我要导航到的页面长时，页面不会滚动到 Firefox 的顶部。在谷歌浏览器上它工作正常。

我正在使用以下代码滚动到页面顶部：

我尝试了其他解决方案，但似乎没有任何效果。我不想为此解决方案使用任何 jquery。

下面是代码：

以下是错误：

我目前在引导模式中有多个组件。我的目标是能够在用户操作之后对给定组件执行 window.scroll。基本上，这是我尝试过的：

我所有的组件都是类组件。我什至尝试将 ComponentThree 包装在一个 div 标签中，如果这有所作为，但没有运气。任何指点将不胜感激，谢谢！

页面加载后，我想使用 Intersection Observer API 观察一个元素（addonCard），以了解该元素是否完全可见。如果元素不可见或部分可见，我希望将元素滚动到完全可见的状态。如果它已经完全可见，我希望元素停止被观察。根据我的理解，您可以通过将 threshold 属性设置为 1 来检查完全可见性。但是，我在下面的实现不起作用（无论元素是否完全可见，它都会滚动）：

有人可以解释为什么这个实现不起作用以及如何使它起作用吗？为什么entry.intersectionRatio永远不会从 0 改变？

预期行为：如果不是完全可见，addonCard 应该滚动到完全可见。如果它已经完全可见，则不应进行滚动。

实际行为：无论 addonCard 是否完全可见，都会发生滚动。

项目：我已经设置了一个滚动功能，当单击“向上”或“向下”时，它应该滚动到容器 div 中的下一个项目。它利用 window.requestAnimationFrame() 方法进行循环并在每次迭代时调用 element.scrollTo。

我这样做的原因是允许自定义持续时间，因为“行为：'平滑'”设置是一个设定的速度，我想保留 css 滚动捕捉功能，所以它需要在一个容器内（所以窗口.scrollTo() 是不可能的，尽管这似乎适用于浏览器）。

问题：这在 Safari 中完美运行，但由于某种原因 .scrollTo() 函数没有在 Chrome 和 Firefox 中移动滚动视图。

我试过的：

1. 我尝试设置 element.scrollTop 而不是调用 element.scrollTo() 具有相同的结果。
2. 我在某处读到 Chrome 的性能对于某些循环来说太快了，所以我用不同持续时间的 setTimeout(()=>{},1) 包围了 element.scrollTo()。这也不起作用。

我的代码：代码可在 Codepen.io 中查看

HTML：

JS：