美文网首页
用scroll()监控浏览器滑动距离

用scroll()监控浏览器滑动距离

作者: 恐怕是小珠桃子 | 来源:发表于2016-11-14 14:53 被阅读241次

    有时我们需要在页面中向上或向下滑动的时候执行一些事件,如果每次滑动都执行事件的话在有些情况下是不合理的,其实我们可以控制浏览器滑动一定距离的时候来触发事件。

    通过再学习js的onscroll、scrollTop、scrollHeight及window.scroll等方法这篇文章,我们可以学习到window.scroll的用法,window.scroll无法直接获得scrollHeight(滑动距离),我们可以试着用下面的方法:

    var pre_scroll_top = 0;
    //上一个位置的高度,初始化为0
    $(window).scroll(function () {
    //浏览器滑动事件控制
        var scroll_top = document.body.scrollTop || document.documentElement.scrollTop;
        //获得当前滑动位置的高度
        var scroll_height = scroll_top - pre_scroll_top;
        //滑动距离 = 当前高度 - 上次的高度
        pre_scroll_top = scroll_top;
    
        if (Math.abs(scroll_height) > 15) {
        //向上或向下滑动距离大于15时执行下面函数  
            get_comments();
        }
    });
    

    相关文章

      网友评论

          本文标题:用scroll()监控浏览器滑动距离

          本文链接:https://www.haomeiwen.com/subject/ojphpttx.html