滚动事件在移动设备上不起作用

Question

Setch.me 在桌面上正常加载，但在移动设备上不会触发，除非我点击摄影师/化妆师，我在此处搜索解决方案后添加了 height=device-height，但这不起作用。

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

Answer 1

试试这个：

$(document.body).on('touchmove', onScroll); // for mobile
$(window).on('scroll', onScroll); 

// callback
function onScroll(){ 
    if( $(window).scrollTop() + window.innerHeight >= document.body.scrollHeight ) { 
        track_page++; 
        load_contents(track_page); 
    }
}

Answer 2

var addition_constant = 0;
$(document.body).on('touchmove', onScroll); // for mobile
$(window).on('scroll', onScroll);

function onScroll() {
  var addition = ($(window).scrollTop() + window.innerHeight);

  var scrollHeight = (document.body.scrollHeight - 1);
  if (addition > scrollHeight && addition_constant < addition) {

    addition_constant = addition;

    loadmorecontest();
  }
}

Answer 3

“scrollTop”值必须在移动设备上使用“Math.ceil”进行舍入。 （根据屏幕分辨率，它是十进制的），所以：

if (el.scrollHeight <= Math.ceil(el.scrollTop) + el.offsetHeight) {
    // so something...
}

Answer 4

除了之前的评论，

$(window).scrollTop()

似乎不适用于移动设备，应替换为

document.body.scrollTop

Answer 5

这似乎有点无关紧要，但因为我发现自己在这里，而它不起作用的原因是我试图滚动的元素有；

overflow-y: hidden

当我删除它时，它工作得很好。我写这个只是为了如果这也是某人的情况。

Answer 6

最近接触了一些，但我遇到了同样的问题，以上答案都没有解决它。事实证明，条件

$(window).scrollTop() + window.innerHeight >= document.body.scrollHeight

始终为 false，因为我在移动设备上的可滚动组件的底部设置了填充

120px

。我将其更改为边距，并且无需监听其他事件或舍入

$(window).scrollTop()

。

Answer 7

您好，您没有正确关闭您的活动，应该是这样的：

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