私は、上にスクロールするたびにメッセージの配列を引き出すチャットウィジェットを持っています。現在直面している問題は、メッセージが読み込まれたときにスライダーが最上部に固定されたままになっていることです。私は、前の配列の最後のインデックス要素にフォーカスしたいと考えています。indexを渡すことで動的な参照を作ることができることはわかりましたが、そのためにはどのようなスクロール関数を使えばいいのかを知る必要があります。
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
//scroll to testNode
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
先に決めた要素の一番上の位置を探しhttps://www.w3schools.com/Jsref/prop_element_offsettop.asp、scrollTo
メソッドでこの位置までスクロールします[https://www.w3schools.com/Jsref/met_win_scrollto.asp][2]。
このような感じで動作します。
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
window.scrollTo(0, tesNode.offsetTop);
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
[2]: https://www.w3schools.com/Jsref/met_win_scrollto.asp
UPDATE:
React v16.3以降、React.createRef()
が推奨されています。
constructor(props) {
super(props);
this.myRef = React.createRef();
}
handleScrollToElement(event) {
if (<some_logic>){
window.scrollTo(0, this.myRef.current.offsetTop);
}
}
render() {
return (
<div>
<div ref={this.myRef}></div>
</div>)
}