js 单个区域实现上拉加载更多

只记录了需要获取的相关高度的方法

整个页面 滚动条触底加载更多

		// 文档的高度
       var docHeight = $(document).height();
       // 窗口的高度
       var winHeight = $(window).height();
       // 滚动条滚动的距离
       var scrollTop = $(window).scrollTop();
       // 判断距离底部100时触发
       var ligh = docHeight - winHeight - scrollTop
       if(ligh < 100) {
       		console.log("可以加载更多了")
       }

单个区域 触底加载更多

var flag = true
 $('.box')[0].addEventListener('scroll', function () {
        var ligh = $('.box')[0].scrollHeight - $('.box')[0].scrollTop - $('.box')[0].clientHeight
        if (ligh < 100 && flag == true) {
			console.log("可以加载更多了")
        }
    },true);

当时做的需求是在页面可左右滑动 点击导航切换页面时用到的 单页面没测试以下问题

注意： 此方法在初始化时遇到获取的高度不对问题 滚动事件不执行问题 但你点击或者页面左右滑动后就好了的问题
可以使用以下方法 初始化页面时自动触发一次点击事件

setTimeout(function () {
          $(".tabs ul li:first-child").click() 
      },1)

其他自动触发点击事件可参考：点此查看