Ich habe ein Chat-Widget, das zieht ein Array von Nachrichten jedes Mal, wenn ich nach oben scrollen. Das Problem, das ich jetzt konfrontiert bin ist, der Schieberegler bleibt an der Spitze fixiert, wenn Nachrichten laden, ich möchte es auf das letzte Indexelement aus dem vorherigen Array zu konzentrieren. Ich fand heraus, dass ich dynamische Refs machen kann, indem Sie Index übergeben, aber ich würde auch wissen müssen, welche Art von Scroll-Funktion zu verwenden, um das zu erreichen
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
//scroll to testNode
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
Finden Sie einfach die oberste Position des Elements, das Sie bereits bestimmt haben https://www.w3schools.com/Jsref/prop_element_offsettop.asp und scrollen Sie zu dieser Position mit der Methode scrollTo
https://www.w3schools.com/Jsref/met_win_scrollto.asp
So in etwa sollte es funktionieren:
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>)
}
UPDATE:
seit React v16.3 wird die React.createRef()
bevorzugt
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>)
}
Die Verwendung von findDOMNode wird irgendwann veraltet sein.
Die bevorzugte Methode ist die Verwendung von Callback Refs.
Sie können etwas wie componentDidUpdate
verwenden
componentDidUpdate() {
var elem = testNode //your ref to the element say testNode in your case;
elem.scrollTop = elem.scrollHeight;
};