Question

我试图在用户向下滚动并到达页面底部时触发事件。

我搜索了互联网并在stackoverflow中发现了一些帖子，但意外地答案对我不起作用。

Ex：Check if a user has scrolled to the bottom

使用针对上述SO帖子给出的答案，我尝试触发的事件在到达页面顶部而不是底部时执行。

如果我出错了，请告诉我：

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
   loadmore();
}
});

function loadmore(){

var lastProd = $('.product_div').last(); 
var lastProdID = $('.product_div').last().prop('id'); 
//console.info(lastProdID); return false;
//var val = document.getElementById("row_no").value;
$.ajax({
    type: 'post',
    url: 'includes/load_products.php',
    data: { getresult:lastProdID },
    success: function (response) {
        console.log(response);
        //var content = document.getElementById("all_rows");
        //content.innerHTML = content.innerHTML+response;
        lastProd.after(response);

        // We increase the value by 10 because we limit the results by 10
        // document.getElementById("row_no").value = Number(val)+10;
    }
});
}

Answer 1

使用window.innerHeight + window.scrollY确定底部位置并检查document.body.offsetHeight是否更低（相等不起作用）。

积分转到mVChr，see here。

window.onscroll = function(ev) {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    alert("bottom of the page reached");
  }
};

.jump {
  height: 1000px;
}

<div class="jump"></div>

Answer 2

检查高度和偏移是否相等

window.onscroll = function() {
  var d = document.documentElement;
  var offset = d.scrollTop + window.innerHeight;
  var height = d.offsetHeight;

  console.log('offset = ' + offset);
  console.log('height = ' + height);

  if (offset === height) {
    console.log('At the bottom');
    loadmore(); // call function here
  }
};

检查用户是否已到达页面底部

2 个答案: