Question

我试图检测用户向下滚动网页底部以加载显示某些内容，当用户滚动到底部附近时，

我使用下面的功能，它可以在所有桌面Web浏览器上完美运行，但它不适用于移动浏览器。

jQuery(function(){
  jQuery(document).scroll(function () {
    if (jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height() -100) {
           //show contents
            alert('near bottom')
    }
  });
});

这是我在http://discount.today/上面申请的工作网站

向下滚动时会显示一些额外的产品，它可以在普通浏览器上运行，但不能在移动浏览器上运行，

请有人帮我解决这个问题。我尝试了许多解决方案，这是在互联网上，但没有运气，谢谢

Answer 1

移动网络与桌面网络不同。原因很简单，边距和填充不同。

您的网站可能不知道如何检测在移动设备上运行时发生的更改，因此就网络问题而言，它并没有达到最低点。

您需要使用CSS 3或者甚至是jquery来向网络发出平台变化的信号，该网站现在更小，因此页面底部。

关于如何做到这一点，我的建议很简短。这是大方向。

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');
  }
}

Answer 3

这是解决方法

 if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
        alert("bottom detected");
}

添加-100，以便可以在移动设备上使用

jQuery检测滚动到达底部不能在移动浏览器上工作

3 个答案: