div设置下拉滚动条以及翻滚到底部

div设置下拉滚动条

首先：我们创建一个父亲div进行包裹我们的内容，style中起作用的是height以及overflow属性，这两个必须要有

  <div  class="messageCrollWindow" style="height: 300px; overflow:auto" >

如果要进行隐藏下拉条，又可以有滚动效果，我们可以进行加多一个属性visibility:hidden

  <div  class="messageCrollWindow" style="height: 300px; visibility:hidden; 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;
    }
}

我们在需要滚动条到最下面的时候进行调用这个函数即可。