问题描述:当我使用之前的跨端监听滚动到底部时,发现针对于微信下拉加载,微信会有一个下拉回弹,导致每次只有弹回至原点时才会加载,导致用户体验极差,不能一次性快乐下滑




//文档高度

function getScrollTop () {

    // 考虑到浏览器版本兼容性问题,解析方式可能会不一样

  return document.documentElement.scrollTop || document.body.scrollTop

}

//可视窗口高度




function getWinHeight () {

        // 浏览器可见内容高度 || 浏览器所有内容高度(考虑到浏览器版本兼容性问题,解析方式可能会不一样)

        return document.documentElement.clientHeight || document.body.clientHeight

}




function getScrollHeight() {

let bodyScrollHeight = 0

let documentScrollHeight = 0

if (document.body) {

bodyScrollHeight = document.body.scrollHeight

       }

if (document.documentElement) {

               documentScrollHeight = document.documentElement.scrollHeight

       }

// 当页面内容超出浏览器可视窗口大小时,Html的高度包含body高度+margin+padding+border所以html高度可能会大于body高度

return (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight

}




//滚动条滚动高度

function isReachBottom () {

const scrollTop = getScrollTop() // 获取滚动条的高度

const winHeight = getWinHeight() // 一屏的高度

const scrollHeight = getScrollHeight() // 获取文档总高度

return scrollTop >= parseInt(scrollHeight) - winHeight

}






window.addEventListener('scroll', function () {

                       console.log(isReachBottom())

                   if(isReachBottom()){

                               //当滚动条到底时,这里是触发内容

                               //异步请求数据,局部刷新dom

                               // alert('一到底部');

                               let hasloadcom = self.state.hasloadcom+16;

                               self.setState({

                                               hasloadcom:hasloadcom

                               })

                               if( hasloadcom >= self.state.goods_items.length )

                               {

                                   self.ReqTableList();

                               }

                   }

                   if(getScrollTop()>4.6*document.documentElement.clientWidth/750*100){

                               console.log('fixed');

                               $('.changing_top').css('position','fixed');

                               $('.changing_top').css('top','0.9rem');

                       }else{

                               $('.changing_top').css('position','relative');

                               $('.changing_top').css('top','0');

                       }

               })

Created with the Personal Edition of HelpNDoc: Free PDF documentation generator