Now we can test every second how far the user has scrolled - but we only trigger it if the user has continued scrolling. Now we should determine how far down the page the user has scrolled.
But we needn’t log every time we scroll - only when we get further down the page.
Now we want to check against a list of elements to see if they have become visible in the page. It’s probably best at this moment to make this a jquery plugin, as we need to pass in a selector element.
Now apply this to any page using the following line:
And it will tell you in console.log every time you scroll one of your “article” html elements into the view.
Other examples would be, if you wanted fire an ajax call to record the id every time you got scrolled a list item of type SearchResult into view, you can use this…
This script could probably do with some enhancements - ie - what if the user resizes the window? If so it’d probably be best to reset the docHeight, winHeight & maxScrollDistnace parameters to make sure we reset where the user has got to for responsive layouts.
I have done a little bit of research and it seems there are some interesting examples of similar work online, like Scrolldepth which is intended for Google Analytics tracking.