当前位置:首页 > 技术文章 > WEB开发 > Javascript

JS实现div元素的滚动条的自动滚动到底部

发布时间:2017-12-12 18:28:55 作者:superl 来源:superl\'s blog 点击量:

最新在开发一款在线客服系统,使用ajax技术,动态的获取新消息,并增加到聊天内容的div块中。

 

聊天内容div块的具有Y轴滚动条,高度为百分之百,样式如:

 

.message-box{
    padding: 0.5rem;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

但是新消息出现后,虽然动态的增加到了聊天界面。但是每次都要手工把滚动条移动到底部,是一件很蛋疼的事情啊,百度搜索也没找到实用的解决办法。

百度到的下面代码,是针对的BODY元素的:

$(function(){
  var h = $(document).height()-$(window).height();
  $(document).scrollTop(h);
});

 

实际测试,在这个项目中并没有什么暖用。不过幸运的是,最终还是搞定了。在这里分析记录一哈

 

解决方法:

function page_init(){
    var div = document.getElementById('message-box');
    div.scrollTop = div.scrollHeight;
}

在页面载入,以及新消息添加之后,调用这个函数即可实现啦

如有转载,请注明出处!《JS实现div元素的滚动条的自动滚动到底部》的原文地址:http://www.superl.org/post-JSsxdivysdgdtdzdgdddb.html

本文链接:http://www.topjishu.net/article/76.html,如有转载,请注明出处!


关键词:JS,div元素,滚动条,自动滚动,底部


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表