问题标签 [scroll-position]
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.
javascript - 页脚在开始时隐藏,然后在滚动后可见
坦率地说:我已经为我的标题准备了这个脚本,它工作得很好:
附带的 CSS:
一切都按预期工作。现在,这看起来很无聊,所以要做好准备,我希望我的页脚元素发生同样的事情。我让它以某种方式与 style.bottom 和 scrollpos 一起工作,但我不能为我的生活提供一个版本,当你到达页面时首先隐藏固定页脚,然后在你向下滚动到一定数量时显示它(或“接近最终值”会更好)。
由于我失败了,我尝试了其他方法。我继续研究向一个元素添加一个滚动类,这样我就可以尝试将它滑入和滑出等等,但让我们彼此诚实,我失败了。
现在我什至不知道我是否可以重新使用我用于移动标题的相同类型的脚本(#mobheader 在我的标题的脚本中)并包含一个隐藏属性,直到开始向下滚动。
我现在不知道应该深入研究什么。在这方面相当新(多么令人惊讶!)并尝试阅读我设法找到的关于类似主题的内容,我觉得我离应该是一个可以正确阅读此内容的人的简单解决方案越来越远。因此,我在这里,需要被拯救!
非常感谢任何可以为我指明正确方向的人。
以防万一:这是我想出的具有相同效果但从底部开始的方法(CSS相同,但底部:0;):
javascript - Next.js 在页面路由时保持滚动位置
我目前正在 Next.js 样板上创建一个网站。
我的路由代码是这样的。(以下)
当我单击此按钮时,我<Button>
不想移动滚动位置。但如您所知,当新页面被路由时,它会移动到顶部。有没有人知道在加载新页面时保持滚动位置。
flutter - 带有 SliverAppBar 的 ScrollablePositionedList 无法正常工作
这是一个用于创建最小可重现示例的存储库。
我想在滚动SliverAppBar
时隐藏ScrollablePositionedList.builder
。这是我在这里包含的相关代码。
到目前为止,我尝试了两种方法都没有正常工作,
方法一
我添加
physics: ScrollPhysics(),
到ScrollablePositionedList.builder
输出:
方法 2
我添加
physics: NeverScrollableScrollPhysics(),
到ScrollablePositionedList.builder
SliverAppBar
这次隐藏了,但现在我无法滚动到ScrollablePositionedList.builder
列表的最后,我有 500 个项目,但它只能滚动到第 14 个项目,请参阅输出。此外,它在滚动上滞后太多
输出:
提前致谢。
fetch - Svelte:如果用户滚动到页面末尾,如何获取更多信息
我有一个从 graphql 服务器获取帖子的组件。如果用户位于页面底部,它将获取更多帖子。我怎样才能检查他是否达到了它?我查看了clientHeight、innerHeight 和outerHeight,但只有clientHeight 才有意义。Probalby 我必须从中减去一些东西,但我不知道究竟是什么以及我错过了什么?
reactjs - 在与 useContext 反应切换模式后恢复滚动位置
目标
在 div 从固定位置切换为无后,恢复窗口的 scoll 位置。
问题
尽管我将它正确保存到状态,但恢复滚动位置不起作用。
描述
我有一个通过 onClick 打开模式的页面。因此,我创建了一个“ToggleModalContext”,一方面将道具传递给模态,另一方面传递给背景 div。我想通过设置 css 属性来修改背景 divposition
以fixed
避免滚动背景而不是模式的内容。当模式关闭时,position: fixed
被删除,我想恢复窗口的滚动位置。这最后一步不起作用。也许其他人有想法?
ToggleModalContext(这是调用滚动恢复功能的上下文)
也许有人有想法?也许我必须使用useEffect?但是怎么做?提前感谢您的时间:)
flutter - 根据 Flutter 中的滚动位置更改容器的宽度
我正在尝试根据 SingleChildScrollView 的滚动位置动态更改容器的宽度。这就是我尝试处理的方式:
我正在打印滚动位置,它是完全正确的,但它对容器的宽度没有影响。
所有这些小部件都在 Stack 小部件下。
我做错了什么?
提前感谢您的支持!
塞尔吉
android - Android Jetpack 导航禁用滚动位置
我有一个包含许多片段的活动(使用喷气背包导航)。在我的第一个片段上,我有一个 recyclerview。如果我在第一个片段上滚动然后导航到另一个片段,该片段将保留滚动位置,我不希望那样。一个例子如下:
即假设我有两个片段 A 和 B,当我的应用程序启动时,它从 A 开始。假设我开始在 A 上滚动,然后导航到 B。我的应用程序保留 B 上的滚动位置,这不是我想要的。我希望片段 B 从顶部开始。然后当它返回到片段 A 时,我希望它保留之前滚动的滚动位置。
片段 A.xml
片段 A.kt:
片段 B.xml
片段 B.kt
导航.xml
MainActivity.xml
MainActivity.kt
我附上了一个 gif 来演示这里的问题:
在 GIF 中,我从 3 个片段导航(片段 A > 片段 B > 片段 C)我在这里做错了什么吗?
react-native - 是否可以阻止第一次渲染并继续进行 componentDidMount?
我有记录列表。点击每个记录用户将被重定向到详细信息页面。当用户回到列表页面时,列表页面必须保留它的滚动位置(即用户应该登陆他点击过的同一条记录)。我FlatList
的如下,
每次用户滚动页面时,滚动位置通过使用onScroll
方法存储以供以后使用
这是handleScroll
方法
这是FlatList
当用户从详细信息页面返回到列表页面时滚动到所需位置的代码
我这样做是componentDidMount
因为,this.flatListRef
在组件至少呈现一次之前可用。
这里的问题是,当第一次渲染发生时FlatList
渲染没有任何滚动位置,然后当 componentDidMout 被调用时FlatList
渲染滚动位置(滚动到所需的列表项)。这种行为对于用户来说显然是明显的,即渲染发生了两次。
这里我的疑问是,1.是否可以阻止第一次渲染,以便componentDidMount
单独渲染FlatList
?
或者
2.当从详细页面返回到列表页面时,是否有任何替代方法可以将用户置于相同的滚动位置?
谢谢你。
html - scrollPositionRestoration: 'enabled' 在应用程序路由中是否适用于包含在 Angular 中延迟加载的可滚动分页数据的页面?
我在左侧的一列中有一个带有分页数据的页面,在右侧有一个地图(例如Airbnb)当我单击列底部的下一页时,我获取返回项目列表的页面数据(例如。成员),但我的可滚动列,它是一个引导列,不会滚动到顶部,它停留在底部,只是更新数据项的新列表。
仅供参考 - 我在我的应用程序路由文件中使用了这样的滚动位置恢复,但它不会在页面中的列内滚动可滚动的分页列表。
分页列表没有滚动到顶部的页面包含在它自己的模块(例如 members.module.ts)和它自己的路由文件(例如 members-routing.module.tx)中,并且它正在像延迟加载一样这个。
在 app-routing.ts
在 member-routing.module.ts 文件中我有这个
问题- 我是否需要使用“scrollPositionRestoration”进行其他类型的导入或导出才能使其正常工作,或者这对可滚动列数据不起作用?
我当前的解决方案是在 .ts 文件中获取 elementRef,然后在获取数据后,滚动到顶部。但这似乎不是一个好的 Angular 9+ 解决方案?
前任。
javascript - 在 Safari IOS 上滚动时更新 scrollLeft / scrollTop 不起作用
在我的 React 应用程序中,用户会看到一个可水平滚动的列表,并且可以向左/向右滚动以加载更多数据。
当用户一直向左滚动时,我会加载更多数据并将其附加到列表的开头。这工作正常,除了滚动位置似乎被重置为 0。
为了解决这个问题,我在将新数据添加到我的列表之后恢复了滚动位置。这在 Android 上运行良好,但在 IOS 上不起作用。
在 IOS 上,我的 DIV 的 scrollLeft 位置在渲染后仍然重置为 0,即使我在渲染后恢复滚动位置。奇怪的是,只有在渲染发生时用户仍在滚动时才会发生这种情况。
因此,似乎在 IOS Safari 上,设置 div 的 scrollLeft / scrollTop 位置仅在用户当前未滚动该 div 时才有效。
有没有人见过这个,也许知道一个解决方法?