问题标签 [js-scrollintoview]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
577 浏览

angular - 如何在有角度动画路由器转换时以角度滚动IntoView?

我有一个页面,上面有项目列表。当您单击项目时,您将激活路由器链接,您将被转移到特定滚动位置的另一个页面。但最近我为页面上的所有过渡添加了角度动画。动画现在停止 scrollIntoView 并且只是将您转移到页面顶部。我仍然希望转换工作,但我也想保留我的 scrollIntoView 功能。

这是我想通过 scrollIntoView 工作的页面的 TS 文件。

我正在使用 id 属性转换到页面上的特定位置。

这就是路由器模块的样子。

ScrollIntoView 本身就可以正常工作。但是一旦我添加了动画,它就会中断。

这就是我使用 routerlink 上的片段调用 scrollintoview 的方式。

但比我添加的动画。

很抱歉这篇长文,但我的问题是如何仅在特定路由器链接上禁用动画?

如:

或者我如何改进动画,以便在动画之后它仍然执行滚动?

注意我有到同一页面的转换,因此禁用整个页面上的动画,如 * => thepage,将不起作用。因为我通常需要使用动画来访问它。

0 投票
1 回答
507 浏览

html - 如何让 element.scrollintoview 在某个位置下工作:固定页脚

有什么方法可以检测到用户专注于固定页脚下的输入?

我有一个表单,允许用户输入多个项目并继续添加项目。他们通常能够进入输入框并且屏幕会自动向上滚动。添加粘性页脚后,页面似乎不会将页脚读取为阻塞视图。scrollintoview() 仅将页面向上滚动一点,但仍被页脚覆盖。此外,element.scrollintoview 不会被触发,直到用户进入一个实际上在屏幕之外的输入框,而不是被固定的页脚遮挡。

我什至尝试修改 tabindex,但问题似乎是固定的页脚。

0 投票
1 回答
586 浏览

javascript - Chrome 上的 scrollIntoView() 窃听

我正在尝试实现可以​​从一个 div ID 滚动跳转到另一个 div ID 的效果。基本上我在div-1上向下滚动并触发滚动事件并跳转到div-2,反之亦然。我能够在 vanilla JS 中实现它。它在 Chrome 上闪烁,但在其他浏览器上运行流畅(除了爷爷 IE)。任何人都知道可能是什么原因造成的,我能得到什么解决方案或替代方案?

0 投票
0 回答
581 浏览

javascript - 即使滚动条已关闭(即溢出:隐藏),scrollIntoView 是否滚动到隐藏的 DIV?

我目前正在测试工具中实现 scrollIntoView 。我注意到 element.scrollIntoView() 滚动到隐藏元素(DIV),即使它们的容器溢出被隐藏(滚动条关闭)。scrollIntoView 的这种行为是预期的吗?我没有看到任何回答这个问题的文章/文件。

0 投票
0 回答
473 浏览

javascript - JavaScript - scrollIntoView() 仅适用于 Firefox

我正在尝试scrollIntoView()使用 SVG 元素。它可以按预期在 Firefox 上运行,但在 Chrome 和 Edge 上它向下滚动太远或其他一些错误的地方。

我有一个selectedCluster带有所选<g>元素的变量。我在嵌套的元素内调用scrollIntoView() 。<polygon><g>

如何使它在 Chrome 和 Edge 中正确滚动?

谢谢

0 投票
0 回答
83 浏览

php - scrollIntoView 固定导航栏

我有一个基于 framework7 的 webapp 从 itemdetail.php?item=157 我创建了一个反向链接,在该链接中我将项目的 id 传递给我所有项目的列表:

shop.php?item=157

在 shop.php 页面(这是项目的动态列表)上,我需要转到上一页中的特定项目:

这段代码可以工作但是...问题是我固定的shop.php导航栏向下移动了一些但是导航栏中的按钮变得难以使用并且无法再向上滚动...如何防止navbar 这招?

0 投票
1 回答
1584 浏览

javascript - 在屏幕中间滚动元素的方式

滚动一直是 selenium 自动化的一个问题。

欢迎大家提出在屏幕中间滚动元素的最佳和可靠方式。

0 投票
1 回答
1681 浏览

javascript - 将元素滚动到容器内的视图中,但不在浏览器窗口中

我有一个带有水平排列标签的容器。请参见下面的示例。

容器具有overflow:hiddenand white-space:nowrap,因此标签可能永远向右移动。我想以编程方式水平滚动到给定的标签,前提是我在 Javascript 中有它的 HTML 元素。

在我的测试组件中,我一直在使用el.scrollIntoView(),它似乎工作得很好。但后来我将组件集成到一个更大的垂直滚动的 HTML 页面中,我注意到每次调用el.scrollIntoView时,它仍然会在其容器内水平滚动到视图中,但整个页面也会跳转到容器所在的位置浏览器窗口的顶部。这是我显然不想要的第二种行为。

有没有办法只在容器内滚动到视图中,而不会让浏览器窗口也跳转?如果可能的话,我想使用香草 JS。

0 投票
0 回答
106 浏览

dom-events - 有没有办法捕获 Element.scrollIntoView() 事件的结束?

我想在滚动到视图后将目标元素闪烁三遍。我在文档中查找了但是没有找到任何关于捕获事件的信息。有没有办法做到这一点?谢谢。

0 投票
0 回答
755 浏览

javascript - ScrollIntoView 滚动到页面底部而不是块的开头

我正在使用 Javascript 的 scrollIntoView() 发送到页面上 div 的开头。在 MAMP 本地,它似乎工作正常,但在线(在 Shopify 上)无论我做什么,它都会滚动到页面底部。

我检查过没有两个元素具有相同的 ID,我尝试过使用不同的元素,我尝试过使用另一个选择器 (document.getElementById('personal-data')),我尝试过简单的 true 参数.

我不确定那里发生了什么。有什么帮助吗?