让DIV中的垂直滚动条自动滚到最底部
来源:互联网 发布:java ip白名单校验 编辑:程序博客网 时间:2024/05/16 06:52
让DIV中的垂直滚动条自动滚到最底部
在聊天窗口中当消息增多超过消息窗体DIV的高度时就会出现滚动条,但此时滚动条在绝大多数浏览器中都始终位于DIV的顶部,这样就会导致之后的消息看不见,必须往下拖动滚动条才能看到新的消息,如果做到当出现滚动条时,滚动条始终位于DIV的底部呢?
方式一:设置DIV的scrollTop=scrollHeight;
方式二:在DIV的底部添加一隐藏元素element,然后调用element.scrollIntoView()。这里的scrollIntoView是原生的方法,通过名称我们就不难发现该方法用来使元素滚动到可视区域。
为了简单起见直接将两种方式放在一起。
<html>
<head>
<style type="text/css">
div{margin:0px;padding:0px;}
#main{width:380px;height:102px;overflow-y:auto;border:1px solid #ddd;padding:0 10px 0 10px;}
#content{width:350px;line-height:20px;}
</style>
<script type="text/javascript">
window.onload=function(){
var i=1;
var hid=document.getElementById('msg_end');//隐藏在消息框下面的元素
var btn=document.getElementById('btnSend');//添加消息的按钮
var cont=document.getElementById('content');//消息框
var mai=document.getElementById('main');
btn.onclick=function(){
cont.innerHTML+='消息内容'+i+'<br/>';
//hid.scrollIntoView(false);//方式1通过调用隐藏元素的scrollIntoView()方法使其可见
//mai.scrollTop=mai.scrollHeight;//方式2通过设置滚动高度
i++;
}
}
</script>
</head>
<body>
<div id="main">
<div id="content"></div>
<span id="msg_end" style="overflow:hidden"></span>
</div>
<input type="button" id="btnSend" value="添加"/>
</body>
</html>
<head>
<style type="text/css">
div{margin:0px;padding:0px;}
#main{width:380px;height:102px;overflow-y:auto;border:1px solid #ddd;padding:0 10px 0 10px;}
#content{width:350px;line-height:20px;}
</style>
<script type="text/javascript">
window.onload=function(){
var i=1;
var hid=document.getElementById('msg_end');//隐藏在消息框下面的元素
var btn=document.getElementById('btnSend');//添加消息的按钮
var cont=document.getElementById('content');//消息框
var mai=document.getElementById('main');
btn.onclick=function(){
cont.innerHTML+='消息内容'+i+'<br/>';
//hid.scrollIntoView(false);//方式1通过调用隐藏元素的scrollIntoView()方法使其可见
//mai.scrollTop=mai.scrollHeight;//方式2通过设置滚动高度
i++;
}
}
</script>
</head>
<body>
<div id="main">
<div id="content"></div>
<span id="msg_end" style="overflow:hidden"></span>
</div>
<input type="button" id="btnSend" value="添加"/>
</body>
</html>
效果如下,滚动条始终最底部
阅读全文
0 0
- 让DIV中的垂直滚动条自动滚到最底部
- div的垂直滚动条自动滚到最下面
- 让DIV的滚动条自动滚动到最底部 总结
- 让DIV的滚动条自动滚动到最底部 - 4种方法
- 让DIV的滚动条自动滚动到最底部 - 4种方法
- 让DIV的滚动条自动滚动到最底部 - 4种方法(第二种好用)
- 网页版即时聊天让滚动条自动滚到最底部
- 如何让div根据内容自动显示水平垂直滚动条
- DIV的滚动条自动滚动到最底部
- jQuery 的 Div 标签滚动条属性及判断垂直滚动条是否到达底部
- jQuery 的 Div 标签滚动条属性及判断垂直滚动条是否到达底部
- jQuery 的 Div 标签滚动条属性及判断垂直滚动条是否到达底部
- jQuery 的 Div 标签滚动条属性及判断垂直滚动条是否到达底部
- jQuery 的 Div 标签滚动条属性及判断垂直滚动条是否到达底部
- jQuery 的 Div 标签滚动条属性及判断垂直滚动条是否到达底部
- jquery如何让滚动条默认在div最底部?
- 用js控件div的滚动条,让它在内容更新时自动滚到底部
- div 显示垂直滚动条
- C语言提高-第5讲: 函数的参数(回文、素数)
- 一个介绍YOLO的特别好的网址
- 360安全卫士企业版卸载
- Filter过滤器
- 3_python入门前100个小程序
- 让DIV中的垂直滚动条自动滚到最底部
- Linux集群管理员应对审计的7个小窍门
- gitlab和github使用ssh方式拉取代码的配置
- Decision Tree(决策树)
- MATLAB作图总结
- Java Applet 基础
- 17092401_CentOS7(64)下Oracle11g创建实例及win7下Oracle客户端连接
- PTG直击|Heat将强化集群资源管理
- 【开源云要闻回顾】SQL Server登陆Linux、Kubernetes新版本发布......