在聊天窗口中当消息增多超过消息窗体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>
效果如下,滚动条始终最底部
相关推荐
让DIV的滚动条自动滚动到最底部.md
下面小编就为大家带来一篇让DIV的滚动条自动滚动到最底部的3种方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
div随滚动条上下滚动,div随滚动条上下滚动div随滚动条上下滚动div随滚动条上下滚动
含有两个内容: 1、div添加内容自动滚动到最下面 2、HTML自动生成随机颜色
网页局部div随滚动条置顶滚动 效果很好,跟普通的滚动不太一样,没有延迟。
当滚动条滑到最低端显示div
DIV滚动悬浮层,页面滚动条滚动,悬浮层保持位置不变!
如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
jQuery实现将div的滚动条滚动到指定位置 jQuery实现将div的滚动条滚动到指定位置
div滚动条 带滚动条的div div滚动条样式div滚动条 带滚动条的div div滚动条样式
div不随滚动条的滚动而动 可以兼容到IE6 绝对好用
浮动div 页面两边滚随滚动条滚动的DIV div滚动
当某一div块区域,设定了固定高度,和overfloat滚动后,要进行滚动到区域底部后的加载或其他操作时,需要知道何时到达底部,此代码解决了这个问题
js 实现 div的自动滚动! 值得下载看看!资源免费,大家分享!!
div随着滚动条滚动,但是到了顶部,便不随着滚动了
单个div滚动条初始化到最低位置
elementUI滚动条,点击dom元素滚动到指定位置
代码如下: $(“#feedbackContainer”).scrollTop($(“#feedbackContainer”).height());
拖动div 内部有滚动条