div滚动条自动在最底部出现

前两天做了一个功能,页面上的聊天功能,里面有遇到聊天内容在div中显示,每次都需要手动看最新的记录,在网上找例子,发现好多都是不符合的,明明搜div下拉框,结果搜到的都是body下拉框。搜了好久。才发现一个和我需求一样的,文中使用的是

.message-box{
    padding: 0.5rem;
    width: 100%;
    height: 100%;
    overflow-y: auto;//竖直方向有滚动条,如果想要横向的,可以把y改为x
}
js实现
 var div = document.getElementById('message-box');
  div.scrollTop = div.scrollHeight;

如果想用jquery实现,可以这么写

 $('#message-box')[0].scrollTop =$('#message-box')[0].scrollHeight;

一开始在菜鸟编程中在线使用,发现可以,但是用到项目上去,结果发现不行,很忧伤,是什么地方写错了呢。

后来才发现了问题,div中增加的内容必须要在div中增加,在div中的子div或ul中增加是不行的。

正确html代码

原文地址:http://www.superl.org/post-JSsxdivysdgdtdzdgdddb.html

你可能感兴趣的:(html)