024. scrollTop, scrollHeight, $('#id')[0] 方法解释 - cwy007/tips-and-skills GitHub Wiki

scroll_bottom = () ->
  $('#messages').scrollTop($('#messages')[0].scrollHeight)

* scrollHeight 指元素的高度（包含padding），也就是height + padding
* scrollTop 查看或者设定滚动条的位置（位于最上方时，位置高度为0）https://api.jquery.com/scrollTop/
* $('#messages')[0]，选中的元素为$返回对象的第一个元素
* $('#messages')[0].scrollHeight 指id为messages的html元素的高度
* $('#messages').scrollTop($('#messages')[0].scrollHeight) 设定id为messages的元素滚动条的位置

效果：聊天软件窗口填满信息时，新的消息可以显示出来，不用手动滚动屏幕

来源：https://www.learnenough.com/action-cable-tutorial#sec-auto_scroll