React.js:停止渲染从滚动到页面顶部

时间:2015-05-21 06:11:19

标签: javascript jquery reactjs

每次在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会滚动到顶部进行某些渲染,而不是其他渲染?

5 个答案:

答案 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 状态的变化而发生的,这将在代码中使用它的任何地方显示变化。 尝试使用该组件的本地状态进行更改,页面正在滚动。