移动设备上滚动事件无效

Question

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

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

- Kareem Kamal

---

可能是在移动设备上使用jQuery实现滚动事件的解决方法的重复问题。 - Blue

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

- vsync

---

那个有效了，非常感谢。所以第二个可以检测到任何滚动，即使不是到文档的末尾？ - Kareem Kamal

@Krim - 任何触摸移动都意味着它的本意 :) 它会在手指在屏幕上移动时触发回调，并且滚动可能是其副产品。 - vsync

它对我有效，使用document.body.scrollHeight-100额外空间！谢谢！ - Micromega

在移动设备上，任何触摸移动（向上移动、向下移动）也会调用该函数！ - Sơn nguyễn

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

- Vinit Choudhari

---

谢谢兄弟。window.innerHeight 对我非常有用。 - Jimil Choksi

它对我有效，在我的手机Chrome浏览器中进行了检查。 - Divyesh

Answer 3

在移动设备上，必须使用 "Math.ceil" 对 "scrollTop" 值进行四舍五入处理（根据屏幕分辨率而定），因此：

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

- Ardeshir Valipoor

---

我的条件语句与上面的那些类似，但四舍五入解决了我的问题。 - tdahman1325

Answer 4

除了之前的评论外，$(window).scrollTop() 在手机上似乎不起作用，应该替换为 document.body.scrollTop。

- mwessn

Answer 5

这似乎有点无关紧要，不过既然我在这里找到了自己的原因，并且导致它不起作用的元素是我试图滚动的那个元素;

overflow-y: hidden

当我移除它时，它完美地工作了。我只是为了如果这也是某人的情况而写的。

- Mutlu

Answer 6

你好，你没有正确关闭事件，应该像这样：

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

- Faithium

---

他没有“关闭”的不是事件，而是回调函数。 - vsync