2017-03-08 13 views
0

Innerhalb eines div Elemente werden dynamisch hinzugefügt. Nach dem componentDidUpdate möchte ich den Inhalt eines div scrollen, so dass das letzte Listenelement sichtbar wird.Scrollen nach unten nach ComponentDidUpdate

css

div { 
    height: 100px; 
    overflow-y: scroll; 
} 

reagieren js

return(
<div> 
    ... 
    <div ref='wrap'> 
    <ul> 
    <li>item</li> 
     .. 
    <li>last item</li> 
    </ul> 
</div> 
    ... 
</div>) 

Antwort

3

Sie die scrollTop Eigenschaft des Elements auf den aktuellen Scrollheight des Elements einstellen. Das würde die Schriftrolle nach unten bringen.

Sie müssen dafür keine jquery verwenden - this.refs[refname] gibt Ihnen das DOM-Element, auf das Sie reagieren können.

componentDidUpdate() { 
    var el = this.refs.wrap; 
    el.scrollTop = el.scrollHeight; 
} 
+0

Während dieser Code-Schnipsel zu begrüßen ist, und etwas Hilfe bieten kann, wäre es [erheblich verbessert, wenn es eine Erklärung enthalten] werden (// meta.stackexchange.com/q/114762) von * wie * und * warum * das löst das Problem. Denken Sie daran, dass Sie die Frage für Leser in der Zukunft beantworten, nicht nur die Person, die jetzt fragt! Bitte [bearbeiten] Sie Ihre Antwort, um eine Erläuterung hinzuzufügen und geben Sie an, welche Einschränkungen und Annahmen gelten. –