每次在React.js中执行渲染时,UI都会滚动到页面顶部。
JSFiddle:http://jsfiddle.net/bengrunfeld/dcfy5xrd/
任何漂亮或反应方式来阻止它?
E.g。如果用户向下滚动页面,然后按下导致渲染的按钮,UI将保持与之前相同的滚动位置。
// Forces a render which scrolls to top of page
this.setState({data: data});
更新:为什么UI会滚动到顶部进行某些渲染,而不是其他渲染?
答案 0 :(得分:10)
@floydophone在Twitter上回答了这个问题。
https://twitter.com/floydophone/status/608129119025561600
@bengrunfeld @reactjs您在链接处理程序上忘记了
preventDefault()
答案 1 :(得分:4)
好的,如果有人读到这个,在我的情况下问题不是上面的任何问题。你必须以任何方式尝试上面的第一个建议。我做了一切,包括preventDefault()
,但没有帮助我。问题是;使用styled-components
。因为样式组件为每个渲染提供一个随机类名。所以它重置滚动。我从css中提取了班级名称并解决了我的问题。
答案 2 :(得分:3)
想要为那些没有使用锚标记的人添加,preventDefault
将无法拯救你。尽管很奇怪,对我而言,它与我的子组件在div
中的渲染有关
display:table > display:tablecell
由于某些原因,在重新渲染时,子组件的滚动位置在这种情况下会丢失。当我切换到flexbox时,问题消失了(显示:flex)。
答案 3 :(得分:0)
如果渲染触发器滚动到顶部,通常意味着某些UI组件由于状态而更改其尺寸,可以通过添加最小宽度/高度来解决此问题
答案 4 :(得分:0)
这可能是由于 redux 状态的变化而发生的,这将在代码中使用它的任何地方显示变化。 尝试使用该组件的本地状态进行更改,页面正在滚动。