滚动加载效果实现

在我们做滚动加载的时候首先要思考以下问题：

一、如何判断滚动条是否滚动到页面底部？

当滚动条的滚动高度和整个文档高度相差不到15像素，则认为滚动条滚动到页面底部了

1、内容文档高度 - 滚动条滚动高度 - 父容器高度 < 15

$(document).height() - $(window).scrollTop() - $(this).height()<15

2、container的高度(父容器高度) + 滚动条高度 >= innerContainer(内容文档高度)的高度就触发

<div class="container">
<div class="innerContainer"></div>
</div>

二、当异步请求数据到还没插入DOM（刷新中）触发地步高度不能再次请求数据

三、当没有下一页数据的时候如何处理

当没有下一页数据的时候滚动到底端也不要请求数据加载了

我们还需要了解以下属性：

1、scrollTop

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。
tips : 设置滚动条的垂直偏移

$("div").scrollLeft(100);

2、scroll() 方法

当用户滚动指定的元素时，会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。

//jquery
$(selector).scroll(function)
//js
window.addEventListener('scroll',function(){
  console.log(90909090)
})

2、height() 方法

获取高度的事件

$(selector).height()

简单的demo

html

<div class="container">
<div class="innerContainer"></div>
</div>

css

.container{
height:100px;
overflow-y: auto;
}
.innerContainer{
height:200px;
}

    $('.container').scroll(function(){
        var _containerHeight = $('.container').height(),
            _scrollTop = $('.container').scrollTop(),
            _innerHeight = $('.innerContainer').height()
        if(_containerHeight + _scrollTop >= _innerHeight){
            //请求接口来做插入数据
        }
        
    })

滚动优化

我们不希望实时触发handle，在处理一些高频率触发的 DOM 事件的时候，节流（Throttling）能极大提高用户体验。
下拉加载优化demo