scroll event not working on mobile

Question

Setch.me loading normally on desktop but not trigerring on mobile unless if I click on photographers/makeup artists, I've added height=device-height after searching for a solution here but that didn't work.

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

Possible duplicate of [jQuery live scroll event on mobile (work around)](https://stackoverflow.com/questions/18753367/jquery-live-scroll-event-on-mobile-work-around) — Blue, Jun 25 '17 at 08:30

score 41 · Accepted Answer · edited Jun 20 '20 at 09:12

41

Try this:

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 25 '17 at 09:23

vsync

118,978
58
307
400

that worked, thank you so much, so the second one detects any kind of scrolling even if it's not to the end of the document? – Kareem Kamal Jun 25 '17 at 09:49
@Krim - any touch move means what it means :) it triggers the callback on when a finger is moving on the screen, and scroll can be a by-product of that. – vsync Jun 25 '17 at 09:53
it works for me with document.body.scrollHeight-100 extra space! thx! – Micromega Oct 10 '19 at 22:56
On mobile, any touch move (moving up, moving down) also calls the function! – Sơn nguyễn Aug 13 '20 at 03:03

score 6 · Answer 2 · answered Aug 22 '19 at 14:57

6

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

answered Aug 22 '19 at 14:57

Vinit Choudhari

61
1
2

thankyou bro.. window.innerHeight worked awesome for me.. – Jimil Choksi Oct 01 '20 at 05:15
It's working for me, I have checked in my mobile chrome browser – Divyesh Apr 12 '23 at 12:31

score 1 · Answer 3 · answered Aug 28 '22 at 05:09

1

The "scrollTop" value must be rounded on mobile devices using "Math.ceil". (It's decimal based on the resolution of the screen), so:

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

answered Aug 28 '22 at 05:09

Ardeshir Valipoor

116
1
3

My conditional statement was like the ones above but the rounding fixed my issue. – tdahman1325 Feb 14 '23 at 19:11

score 0 · Answer 4 · answered Aug 05 '21 at 11:41

0

In addition to previous comments, $(window).scrollTop() seems not to work on mobile and should be replaced with document.body.scrollTop

answered Aug 05 '21 at 11:41

user194324

38
1
6

score 0 · Answer 5 · answered Oct 11 '21 at 06:53

0

It seems bit irrelevant but since I found myself here and my reason that it not worked is the element that I was trying to scroll has;

overflow-y: hidden

When I remove that it worked perfectly. I just wrote that for if it is also someone's case.

answered Oct 11 '21 at 06:53

Mutlu

13
3

score -1 · Answer 6 · answered Jun 25 '17 at 09:18

-1

Hi you didn't close correctly your event, this should be like this:

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

answered Jun 25 '17 at 09:18

Faithium

111
1
2
11

1

it's not the *event* which he didn't "close" but the callback function. – vsync Jun 25 '17 at 09:21

scroll event not working on mobile

6 Answers6

Try this:

Linked