div设置下拉滚动条
首先:我们创建一个父亲div进行包裹我们的内容,style中起作用的是height以及overflow属性,这两个必须要有
<div class="messageCrollWindow" style="height: 300px; overflow:auto" >
如果要进行隐藏下拉条,又可以有滚动效果,我们可以进行加多一个属性
<div class="messageCrollWindow" style="height: 300px; ; overflow:auto" >
这样操作会隐藏了父div,子div也会被隐藏
我们也需要在子div中进行设置该属性visibility:visible,这样就可以从外观上隐藏下拉条,又可以有滚动效果
翻滚到最底部
实现这个功能我们用的是js来进行操作
首先给我们的下拉DIV设置一个className
然后js如下:
//使聊天拉到最下方
function scrolldown(){
var messageCrollWindows=$(".messageCrollWindow");
console.log(messageCrollWindows);
for(var i=0;i<messageCrollWindows.length;i++){
messageCrollWindows[i].scrollTop = messageCrollWindows[i].scrollHeight;
我们在需要滚动条到最下面的时候进行调用这个函数即可。
div设置下拉滚动条首先:我们创建一个父亲div进行包裹我们的内容,style中起作用的是height以及overflow属性,这两个必须要有 <div class="messageCrollWindow" style="height: 300px; overflow:auto" >如果要进行隐藏下拉条,又可以有滚动效果,我们可以进行加多一个属性visibility:...
function updateScroll(){
var element = document.getElementById("divId");
element.scrollTop = element.scrollHeight;
<div class="container">
<div class="inner">Bottom</div>
<div class="inner">Hi</div>
在我的移动端页面需要做一个固定高度的DIV,每次往这个DIV中增加内容的时候我需要将滚动条自动滚动至最底部保证每次看到的都是最新的内容。(这样增加了用户的体验度好感,就像微信的聊天窗口一样。)我利用了JavaScript中的scrollTop = scrollHeight这两个属性来实现,代码如下:
html代码:
<div class="box" style="width:500px...
如果设置overflow:auto;表示当你内容超过div高度出现滚动条
overflow语法如下:
overflow : visible | auto | hidden | scroll
visible :不剪切内容也不添加滚动条。假
fyg19890414: