php滚动条怎么用,如何让滚动条自动滚到最底部

让滚动条自动滚到最底部的方法：首先在DIV的底部添加一隐藏元素“element”；然后调用“element.scrollIntoView()”方法；最后使元素滚动到可视区域即可。

如何让滚动条自动滚到最底部？

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

在聊天窗口中当消息增多超过消息窗体DIV的高度时就会出现滚动条，但此时滚动条在绝大多数浏览器中都始终位于DIV的顶部，这样就会导致之后的消息看不见，必须往下拖动滚动条才能看到新的消息，如果做到当出现滚动条时，滚动条始终位于DIV的底部呢？

方式一：设置DIV的scrollTop=scrollHeight;

方式二：在DIV的底部添加一隐藏元素element，然后调用element.scrollIntoView()。这里的scrollIntoView是原生的方法，通过名称我们就不难发现该方法用来使元素滚动到可视区域。

为了简单起见直接将两种方式放在一起。

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;}

window.οnlοad=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.οnclick=function(){

cont.innerHTML+='消息内容'+i+'
';

//hid.scrollIntoView(false);//方式1通过调用隐藏元素的scrollIntoView()方法使其可见

//mai.scrollTop=mai.scrollHeight;//方式2通过设置滚动高度

i++;

}

}

效果如下，滚动条始终最底部

更多相关知识，请访问PHP中文网！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！

专题推荐：滚动条