Fire event when scrolled to element on mobile

Question

I have this code that detects when the user scrolls past the bottom of an element:

var scrolltriggered = false;

$(document).on('scroll', function() {
   if(scrolltriggered === false && 
      $(window).scrollTop() >= $('.elementclass').offset().top +
      $('.elementclass').outerHeight() - window.innerHeight ){
      scrolltriggered = true;
      /* Actions */
   }
});

I have added a fiddle to demonstrate it in action: https://jsfiddle.net/e54cmrvg/

This works for mouse scrolling, but not for touch scrolling on mobile devices.

Any suggestions as to how I can enable the function for mobile devices as well?

Answer 1

The easiest hack-around is to use touchend like this:

$(document).on('scroll touchend', function(){});

Meaning that when the user finishes touching the screen, you will perform the same operation which checks offsetTop.