问题标签 [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 投票
2 回答
4042 浏览

python - chromedriver版本> 74的MoveTargetOutOfBoundsException问题

我不知道为什么move_to_element()ActionChains 不适用于 chromedriver >74。

(但它适用于 chromedriver 74 和 geckodriver。)

即使我在 ActionChains 之前添加了这三行,它仍然无法移动到元素。

并抛出如下错误:

selenium.common.exceptions.MoveTargetOutOfBoundsException:消息:将目标移出边界(会话信息:chrome=79.0.3945.117)

我也尝试使用Selenium MoveTargetOutOfBoundsException 中提到的 move_to_element_with_offset 即使在滚动到 element 之后,它仍然无法正常工作:

下面是我的 chromedriver 设置。对 ActionChains 有任何设置影响吗?

0 投票
1 回答
905 浏览

javascript - ScrollIntoView 不适用于 reactjs 中的 IE?

基本上我有一个时间下拉列表,但是在 IE 上选择的时间没有滚动

scrollIntoView

0 投票
1 回答
928 浏览

angular - scrollIntoView 锚定在不同的组件中

我有一个带有固定顶部导航栏的 Angular 8 SPA,可以将用户自动滚动到他单击的部分。

在此处输入图像描述

首先,我使用了一个简单的href="#section1". 当用户单击导航栏中的链接时,相关部分将正确显示。但我想让它变得流畅,所以我决定改用这里scrollIntoView所示的方法。

不幸的是,它似乎不起作用。该方法scrollToElement()在 中,navbar component而目标部分在另一个组件中(目前,app component,但将来会改变......)。因为锚点在另一个组件中,所以当我单击时<a>,元素未定义,我在控制台中收到此错误:ERROR TypeError: Cannot read property 'scrollIntoView' of undefined

app.component.html

navbar.component.html

navbar.component.ts

我想我遇到了问题,但我不明白如何解决它。在使用该方法之前,我应该在 中使用变量navbar.component.ts来存储元素吗?scrollIntoView

在此先感谢您的帮助!

解决了

navbar.component.html

navbar.component.ts

0 投票
1 回答
11223 浏览

javascript - React: [useRef, scrollIntoView,] 如何只自动滚动溢出页面内的特定 div?

正如你在我的例子中看到的

页面加载,页面和嵌套滚动 div 都自动滚动。

我想要做的只是scrollIntoView我设置为我的参考的溢出 div。

我的目标是 ref,它正在工作,但我如何不滚动父元素呢?

0 投票
0 回答
369 浏览

reactjs - 反应:使用引用在 componentDidMount 上的 scrollIntoView

我正在渲染一个包含大量文本的 Dialog 组件,因此该对话框有一个滚动条。文本包含一些链接,当单击链接时,Dialog 的内容会发生变化。问题是,当内容发生变化时,滚动保持在链接高度的相同位置。当显示新内容时,我想滚动到对话框的顶部。

我为 Dialog 内容创建了一个类组件,并实现了使用 refs 和 scrollIntoView 滚动到 Dialog 顶部的 handleTop 函数。当从按钮单击事件 (TestButton) 调用此函数时,内容将滚动到顶部。但是,当从 componentDidMount() 调用此函数时,什么也没有发生。

我还通过放置 console.log 消息验证了 componentDidMount 函数是否被调用。

任何想法或建议将不胜感激。

0 投票
1 回答
158 浏览

reactjs - 如何使用 react 和 redux 从不同/其他页面滚动到视图?

我对前端开发有点陌生,刚刚在这个领域找到了我的第一份工作。我正在开发一个使用 React 和 Redux 构建的网站。我遇到的问题是在一个包含多个 div 部分的页面上。Navbar 中的按钮使用 React onClick-event 来获取与按钮相关的部分的 id,然后“滚动到视图”以向下滚动到该部分。这很好用,尽管我希望能够到达同一页面并从不同的页面滚动到视图中。这是导航栏按钮的示例:

所以这方面的一个例子是:假设这个页面在:'url.com/categories'。当我在此 url 上按下显示“有趣”的按钮时,页面向下滚动到 id 为“有趣”的部分没问题。但我也可以在另一个页面上 - 比如说:“url.com/categories/stories” - 那里有相同的导航栏,当我按下显示“有趣”的按钮时,我想被重定向到“url.com/categories”,然后向下滚动到“有趣”部分。

我希望我的问题有意义,如果没有,请告诉我!英语不是我的母语,提出正确问题的艺术似乎在学习如何编码方面发挥了重要作用。:) 正如我所说,我对此很陌生,根本没有使用 React 或 Redux。谢谢!/乔尔

0 投票
1 回答
43 浏览

javascript - 单击表格行时如何滚动到具有固定标题的页面上的元素?

我有一个具有固定标题的页面。在该页面上,我有一个表格,该表格具有在单击一行时页面滚动到该元素的功能。每个表行都有一个与元素 id 匹配的 id。所以在点击时,我得到元素的 id 然后执行这个函数

这种方法的问题是滚动太远并且元素的某些部分隐藏在固定标题下方。我查看了很多关于堆栈溢出的解决方案,但没有一个对我有用。我希望滚动在元素顶部结束。

所以,我然后尝试使用

我做了一些计算,比如考虑填充/边距并让它工作。问题是不同设备上的 offsetTop 不同。上述逻辑不适用于手机和平板电脑。offsetTop 是当前元素相对于 offsetParent 顶部的距离,这对于每个设备来说都不相同。

我知道这scrollIntoView将是我最好的选择,但不确定如何防止元素在固定标题下方滚动。任何帮助表示赞赏。

0 投票
2 回答
1518 浏览

angular - 为什么 scrollIntoView() 仅适用于视图参考?

我正在尝试将 scrollIntoView() 用于我的 Angular 2 项目。我有一个带有溢出的容器 div,当数据到达组件时它会增长,我需要在数据到达时滚动到 div 的底部。如果我使用一个按钮并通过它传递引用,这工作正常。

例子:

在组件中:

问题是我不想使用按钮,我需要在组件内调用 scrollTo 函数。我曾尝试使用 @ViewChildren、document.querySelector 和 document.getElementById,但没有任何效果。

例子:

1)

在函数中:

2)

3)

在所有情况下,如果我通过控制台打印元素,结果都是一样的:

但是滚动只能通过按钮滚动到容器 div 的底部。

附加数据:该项目是 PowerPoint 的 VSTO 加载项,它应该在 IE11 上运行。谢谢你的帮助。

0 投票
1 回答
3261 浏览

javascript - scrollIntoView() 在 IOS Safari 和 chrome 上不起作用?

我对 javascript 和一般编程非常陌生,并且试图使用 scrollIntoView() 函数无济于事。

我在移动 Android Chrome 和三星 Internet 中测试了以下代码,它工作正常,但在移动 IOS Chrome 和 Safari 中它没有

当我按下水平滚动菜单中的任何导航链接时,滚动条会一直移动到“帮助”链接的末尾,并且也会突出显示它。(它确实会转到正确的页面,请参见下面的图片示例)

我的意思的图片

scrollIntoView() 是否始终在 IOS(Iphone 6 版本及更高版本)中工作,或者我在使用它的方式上做错了什么?

HTML

CSS

Javascript

0 投票
0 回答
22 浏览

javascript - 当页面上的内容较少并且由于内容较少而网页上没有页面滚动时,scrollintoview 是否有效

当目标元素位于内容较少的页面内时,scrollintoview 是否工作,因为页面滚动不会出现在网页上

问题是当目标元素位于具有滚动条的网页中时,我的 scrollintoview 功能可以正常工作并平滑滚动到目标元素。但是当相同的目标元素在具有较少内容的网页中时失败,因为不会出现网页的滚动条,并且我对目标元素的滚动查看功能不起作用