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

我們在需要滾動條到最下面的時候進行調用這個函數即可。