每次在React.js中执行渲染时,UI都会滚动到页面顶部。
JSFiddle:http://jsfiddle.net/bengrunfeld/dcfy5xrd/
有什么好的或被动的方法来阻止这种情况吗?
例如,如果用户向下滚动页面,然后按下导致呈现的按钮,则UI将停留在与以前相同的滚动位置。
// Forces a render which scrolls to top of page
this.setState({data: data});
更新:为什么某些渲染的UI会滚动到顶部,而其他渲染则不会?
发布于 2018-03-11 05:32:19
好的,如果有人读了这篇文章,在我的例子中,问题不是上面提到的任何一个。无论如何,你必须首先尝试上面的建议。我做了所有的事情,包括preventDefault()
,但没有帮到我。问题是;使用styled-components
。因为,样式化组件在每次渲染时都会给出一个随机的类名。所以它会重置滚动。我从css中给出了类名,并解决了我的问题。
发布于 2016-12-23 22:44:22
想在这里为那些不使用锚标签的人添加,preventDefault
将不会保存你。虽然很奇怪,但对我来说,它与在div
中呈现我的子组件有关
display:table > display:tablecell
由于某些原因,子组件的滚动位置在这种情况下会丢失,因为有任何重新呈现。当我切换到flexbox (显示:flex)时,问题消失了。
发布于 2019-08-19 16:47:57
如果渲染触发器滚动到顶部,通常意味着某个UI组件由于状态而改变其尺寸,这可以通过添加最小宽度/高度来修复
https://stackoverflow.com/questions/30365818
复制相似问题