I have created a web page that is compatible on mobile devices. The page contains a bunch of items that I would like to call "Cards". So basically what I need was able to flip to the cards by scrolling (up and down). So far I have used the script below to do the scroll.
$('html, body').animate({
scrollTop: $("#"+id).children().children("#respondBtn").offset().top
}, 200, 'swing');
When I checked it using my web browser on PC, the scroll is working as expected.. I have some listeners that will check for the next item and will automatically scroll when found.
Now the issue is that, on mobile, using the scroll feature, there are times that I may have scrolled past the next element, and then what will happen is that it will bounce back to that element. What I need to do is to stop to the next card and not be able to scroll past the next item.
I have accepted an answer.. but please I am very much open to suggestions! Thanks! :)
It seems that you are looking for something like pagePiling.js plugin for jQuery.
It will create those "cards" for you and show or hide them when scrolling up or down.