Vjeux » Scroll Position with React

Dealing with scroll position when you insert content is usually a difficult problem to solve. We'll see how to use React life cycle methods to solve it elegantly. Insertion at the bottom The first example is to maintain the scroll position at the bottom when an element is inserted at the bottom. A common use case is a chat application. In order to scroll at the bottom, we can do that on componentD

[kitokitoki]

scroll

[suisho000000]

“vjeux”

[efcl]

componentWillUpdateで現在地をとっておき、componentDidUpdate animation で差分を反映することでアニメーションする手法