Endless Scrolling
Endless scrolling is a popular navigation tool these days. In a nutshell, it consists of loading the content of a page dynamically while the user scrolls to the bottom of the page. With this technology, the user doesn’t need to click on a button to access all of the content on a page, which, in most cases, is a better user experience.

Besides its practical benefits, endless scrolling is also used for aesthetic reasons. Many plugins using technologies such as jQuery, HTML5 and CSS3 allow you to handle different media and appear with different effects, such as sliding, fading, and spinning, among others. Parallax effects also create cool animations and can give a sense of depth into a website.

As endless scrolling is increasingly used on the web, there are still issues providing the same results on mobile devices. As the scrolling experience is not the same on a mobile than on a computer, the behavior of the technology can be wrong if it’s not optimized for mobile devices.

The project SUPERSCROLLORAMA, made by John Polacek, is a great example. On a computer, we can really appreciate the different types of animations possible as we progress down the page. However, if we play it on a mobile device, we can notice that most of the effects don’t appear as expected, and some of the effects don’t appear at all.

The main problem doesn’t come from mobile devices, which generally support most of the technologies used for endless scrolling. It comes from the speed of the scrolling which ultimately depends on the user behavior. If the user scrolls down very slowly, the user will still see the different animations of an endless scrolling website. That said, a website is supposed to adapt to user habits, not the other way around – that’s why we have to find other solutions to create a good user experience. Unfortunately, controlling scroll speed through the code is not an option as it depends entirely on the browser’s settings, but there are all alternatives.

First of all, we have to detect if the user is using a mobile device. With JavaScript, we can gather information on their OS. By testing all of the mobile OSes, we can determine whether a mobile device is being used:

$(document).ready(function() {

if(navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)) {

alert("This is a mobile device");
}
});

The next step is to redefine the scrolling method for mobile devices. Instead of the dialog box, we want to write some instructions to control the scrolling behaviour. For mobile devices, JavaScript offers two functions that correspond to the touch event. First, we want to disable scroll when the user touches the screen. So we will apply the preventDefault() method on both “touch start” and “touch move” events.

document.ontouchstart = function(e){
e.preventDefault();
}

document.ontouchmove = function(e){
e.preventDefault();
}

Now we have to detect which direction users want to scroll in. By comparing the Y position of the first touch, and the Y position at the end of the “touch move” event, we can figure out if the user wants to scroll up or down.

var startY = 0;

document.ontouchstart = function(e){
e.preventDefault();
startY = e.touches[0].clientY
}

document.ontouchmove = function(e){
e.preventDefault();
if(e.touches[0].clientY > startY){
alert(“scroll up”)
}else{
alert(“scroll down”)
}

We want to simulate the scroll when the user touches the screen. JQuery offers the function animate() that allows us to changeyjr parameter with a certain delay. We will apply this function on the top position of the scroll in the body element. As the ontouchmove function is called every time the document moves, we use a boolean variable to only move the document one time per scroll. The new position of the body increases if the user scrolls down, and decreases if the user goes up. In our example, we will add or remove 300pixels to the scroll top position every time the user scrolls the page. Here is the whole code:

$(document).ready(function() {

//detect if the device is mobile
if(navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)) {

var startY = 0;
var topPosition = 0;
var moved = false;
var maxScroll = $(document).height() - $(window).height()

//event called when the user touch the screen
document.ontouchstart = function(e){
e.preventDefault();
startY = e.touches[0].clientY
moved = false
}

//event called when the user moves his finger on the screen
document.ontouchmove = function(e){
e.preventDefault();
if(e.touches[0].clientY > startY){
var newPosition = Math.max(0, topPosition-300)
}else{
var newPosition = Math.min(topPosition+300, maxScroll)
}

if( !moved ){
//animation on the scroll top position of the body
$("html,body").animate( {scrollTop: newPosition}, Math.abs(newPosition - topPosition)*3 );
topPosition = newPosition
moved = true
}
}
}

//Here write your instructions to animate your elements while scrolling

});

You can see the result by launching this demo on a mobile device. I hope you found this explanation helpful!