让DIV中的垂直滚动条自动滚到最底部

最新推荐文章于 2024-07-13 12:43:11 发布

原创最新推荐文章于 2024-07-13 12:43:11 发布 · 540 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

js 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一种让滚动条始终保持在消息窗口底部的方法，确保新消息总是可见。通过两种方式实现：一是设置DIV的scrollTop属性等于scrollHeight；二是利用隐藏元素的scrollIntoView()方法。

在聊天窗口中当消息增多超过消息窗体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>