乐趣区

关于javascript:浏览器和元素的滚动事件scroll相关

jiezi

良久没有手写过列表的懒加载了，刚好遇到权当是温习了吧，记录一下相干的 API

html 代码如下 

<div class="box">
        滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答
        滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答
        滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答
        滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答
        滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答
        滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答
        滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答
    </div>
    <button id="btn"> 点我赋值 scrollTop</button>

而后款式设置一下让它呈现滚动条 

.box{
       width: 100px;
       height: 100px;
       padding: 10px;
       border: 3px solid blue;
       overflow: auto;
}

通过 js 的事件来监听 box 元素的滚动间隔等来做相干的操作，有几点留神的：

  1. addEventListener 增加的事件在通过 removeEventListener 来进行移出的时候，参数中的事件名和函数都必须是同一个，在示例中是通过新建了一个 callback 的函数实现
  2. scroll 家族的一些属性要相熟：
  3. scrollTop：获取的是滚动时被卷去的间隔

  4. clientHeight：获取的是 元素 / 视口 的高度 (content + padding)，比方：

               height:100px;padding:10px;   这时的 clientHeight 就等于 120
  5. scrollHeight：获取到元素的理论高度 (content + padding)，如果元素没有设置指定的高度 自适应的话和 clientHeight 相等，即便被 overflow:hidden/auto 暗藏掉的局部也会被获取到
  6. 想要获取到间隔底部的间隔能够应用 –> 元素的理论高度 – 滚动时被卷去的间隔 – 元素 / 视口 的高度，获取到间隔底部的间隔 scrollHeight – scrollTop – clientHeight
let box = document.querySelector('.box')
    
    window.addEventListener('scroll',function(){console.log('屏幕滚动');
    })

    function callback(){

        let cover = box.scrollTop + box.clientHeight

        let remain = box.scrollHeight - cover

        console.log(`box 滚动的间隔 ${box.scrollTop},
                    box 视口的高度 ${box.clientHeight},
                    总共展现过的局部 ${cover},
                    间隔底部的间隔 ${remain}`);

        if(remain <= 200){console.log('快到底了');
            box.removeEventListener('scroll',callback)
        }
    }

    box.addEventListener('scroll', callback)

    console.log(`box 的高度 ${box.scrollHeight}`);
    
    //document.documentElement 获取到的是整个 html 文档的信息,root 节点

    // 给 box.scrollTop 赋值挪动到指定的地点
    let btn = document.querySelector('#btn')
    btn.onclick = function(){console.log('点击');
        box.scrollTop = 600
    }
退出移动版