JS滚动事件及滚动条位置设置

Posted on

前言

放假闲着没事，想做一个微信聊天的H5页面，发现自己在很多方面都…

呃，进入正题，这里记录一下滚动事件的使用。

为学习JS的滚动事件，我们先来认识dom的几个属性

  1. scrollTop

    获取或设置一个元素的内容垂直滚动的像素数，当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0

  2. scrollHeight

    scrollHeight（内容的实际高度+上下padding<如果没有限制div的height，即height是自适应的，那么scrollHeight=clientHeight>）

  3. scrollHeight

    clientHeight（height+padding，不包含边框），可以理解为元素可视区域高度

    效果图，控制台输出结果如下：

下面简单实现一下一个小Demo（微信聊天）

  • 代码实现

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var ele = document.getElementById("chatContainer");
    //判断元素是否出现了滚动条
    if(ele.scrollHeight > ele.clientHeight) {
        // 设置一个延迟，更自然一些
        setTimeout(function(){
            //设置滚动条到最底部
            ele.scrollTop = ele.scrollHeight;
            ele.style.opacity = 1;
        },500);
    }
     
    // PS：当然，大家也可以加一些css样式（如：渐变之类的），进行美化

  • 实现思路

    1. 每次增加对话框时，判断chatContainer的‘真实高度’有没有超出‘实际高度’
    2. 若超出就把滚动条滚动到最底部

进阶

谈到滚动事件的监听，我们就不得不聊一聊防抖的节流，以减少事件调用频率，减轻浏览器负担

这里有一篇很好的博文推荐给大家 js防抖和节流