判断滚动条是否滚动到页面底部

scrollHeight:文档内容实际高度,包括超过屏幕视口高度溢出的部分。=内容的大小+paddng
scrollTop:滚动条距元素(不一定是屏幕最顶端)顶部滚动的距离。
clientHeight:浏览器窗口可视范围高度(就是自己能看到的高度,如果这个盒子都在可视区,内容则是盒子的高度)。=元素的大小+padding。
offsetParent:距离该子元素最近的进行过定位的父元素(position:absolute relative fixed),如果其父元素中不存在定位则offsetParent为--body元素。=元素的大小+padding+border


客户区大小

滚动偏移

滚动条是否滚到底部的判断条件是

scrollHeight = scrollTop + clientHeight

所以在实现时我们只要获取这三个值就可以了,而这三个值js都有对应的api获取,分别是

let scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
let clientHeight = document.body.clientHeight || document.documentElement.clientHeight

====================================================================================

h5页面上下滑动翻页

判断条件:1)触底,触发翻页,2)翻页的时候,把上一页内容保存一下,下一页拼接到上一页内容后面,这样可以上下翻。

mounted(){
window.addEventListener('scroll', this.handleScroll,true) // 监听页面滚动*/
},
methods:{
handleScroll () {
      //变量scrollTop是滚动条滚动时,距离顶部的距离
      let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
      //变量windowHeight是可视区的高度
      let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
      let dataArr = []
      //滚动条到底部的条件
      if(scrollTop + windowHeight === scrollHeight){
        dataArr = this.giftList //把上一页的数据赋给dataArr
        this.pageNum = this.pageNum + 1
        this.getList()//请求到新一页的数据
        this.giftList = dataArr.concat(this.giftList)//数据拼接
      }
    },
// 获取所有展示的兑好礼列表,服务端接口用 rpc
getList(){
      let param = {}
     接口(param,function(res){
        let res = this.response(res)
        this.giftList = res.list 
      })
   },
}

====================================================================================

你可能感兴趣的:(判断滚动条是否滚动到页面底部)