Javascript 将元素滚动到底部

我正在创建一个“日志”屏幕，在React中定期更新。为了确保最新添加的内容始终显示在视图中，我希望元素始终滚动到底部：

我让溢流阀工作：

CSS: 以及HTML：

JSX: 但这只工作一次，当“.log”的内容更新时，我需要滚动到底部

---

非常感谢您的帮助。

您可以为

日志

组件的最上面的元素提供

参考

，并确保在

组件更新

中更新道具时将其滚动到底部

示例

类日志扩展了React.Component{
ref=React.createRef（）；
componentDidUpdate（）{
this.ref.current.scrollTop=this.ref.current.scrollHeight；
}
render（）{
返回(

{this.props.log.map（（log，i）=>(
{log.message}
))}

);
}
}
类应用程序扩展了React.Component{
状态={logs:[]}；
componentDidMount（）{
设置间隔（（）=>{
this.setState（prevState=>{
返回{logs:[…prevState.logs，{message:Math.random（）}]}；
});
}, 1000);
}
render（）{
返回；
}
}
render（，document.getElementById（“根”））

您可以将其设置为回调，因此每次执行函数以获取日志更新时，您都可以将其添加到函数末尾。非常好，谢谢。我必须将我的
react
和
react dom
更新为>
16.3
，这样我就可以使用
createRef（）
。
div.log {
    height: 200px;
    overflow: auto;
}

render() {

    return (

            <div className="log">
                <ul>
                    {this.props.log.map((log, i) =>

                        <li key={i}>
                            {log.message}
                        </li>
                    )}

                </ul>
            </div>

    );
}

import React from 'react';

export default class Log extends React.Component {

    constructor(props) {

        super(props);

    }

    render() {

        return (

                <div className="log">
                    <ul>
                        {this.props.log.map((log, i) =>

                            <li key={i}>
                                {log.message}
                            </li>
                        )}

                    </ul>
                </div>

        );
    }

}

 var element = document.getElementByClassName(".log");
 element.scrollTop = element.scrollHeight;