滚动加载

2017-11-23

在很多前端页面中有一个功能就是新闻页面的下拉到页面底部不断刷新新的数据,今天就来好好分享这段代码.

思路:

有一个前台页面和一个后台数据库,每次用户滑动到页面底部,开始向后台发送数据请求,不断刷新前端的内容.

所以前端页面设置如下:
前端设置

1. ul标签里就是每次刷新页面向此标签里添加新闻条目,一开始的页面是没有的,所以需要向后台请求数据.

2. 页面加载完毕之后,判断页面有没有新闻条目,如果没有,此时请求数据,生成新闻条,充满页面.判断浏览器的高度

详情图

3. 所以当body被内容撑开的高度减去浏览器的高度与scrollTop值相等的话,就表示鼠标滑到了页面底部,此时请求数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  //js代码
  window.onscroll=function(){
      var windowHeight=document.documentElement.clientHeight;
      var bodyHeight=document.documentElement.offsetHeight;
      var scrollHeight=bodyHeight-windowHeight;
      var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
      if(scrollTop==scrollHeight){
          //触发的事件
        }
}
兼容各种浏览器的写法获取浏览器的宽和高:(不包括工具栏/滚动条)
var w=window.innerWidth || document.documentElement.clientWidth ||  document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;