首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >React.js:从滚动到页面顶部停止呈现

React.js:从滚动到页面顶部停止呈现
EN

Stack Overflow用户
提问于 2015-05-21 14:11:19
回答 3查看 30.1K关注 0票数 42

每次在React.js中执行渲染时,UI都会滚动到页面顶部。

JSFiddle:http://jsfiddle.net/bengrunfeld/dcfy5xrd/

有什么好的或被动的方法来阻止这种情况吗?

例如,如果用户向下滚动页面,然后按下导致呈现的按钮,则UI将停留在与以前相同的滚动位置。

代码语言:javascript
复制
// Forces a render which scrolls to top of page
this.setState({data: data});

更新:为什么某些渲染的UI会滚动到顶部,而其他渲染则不会?

EN

回答 3

Stack Overflow用户

发布于 2018-03-11 05:32:19

好的,如果有人读了这篇文章,在我的例子中,问题不是上面提到的任何一个。无论如何,你必须首先尝试上面的建议。我做了所有的事情,包括preventDefault(),但没有帮到我。问题是;使用styled-components。因为,样式化组件在每次渲染时都会给出一个随机的类名。所以它会重置滚动。我从css中给出了类名,并解决了我的问题。

票数 16
EN

Stack Overflow用户

发布于 2016-12-23 22:44:22

想在这里为那些不使用锚标签的人添加,preventDefault将不会保存你。虽然很奇怪,但对我来说,它与在div中呈现我的子组件有关

代码语言:javascript
复制
display:table > display:tablecell

由于某些原因,子组件的滚动位置在这种情况下会丢失,因为有任何重新呈现。当我切换到flexbox (显示:flex)时,问题消失了。

票数 3
EN

Stack Overflow用户

发布于 2019-08-19 16:47:57

如果渲染触发器滚动到顶部,通常意味着某个UI组件由于状态而改变其尺寸,这可以通过添加最小宽度/高度来修复

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30365818

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档