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

最新推荐文章于 2025-06-10 14:01:25 发布

原创最新推荐文章于 2025-06-10 14:01:25 发布 · 3.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#div设置滚动条 #滚动条翻滚到底部

JS/JQ 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用CSS设置div元素的下拉滚动条，包括隐藏滚动条外观但保持滚动功能的方法。同时，通过JavaScript实现自动将滚动条定位到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;
    }
}

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