Tips

Here's the place for some useful tips when using skrollr.

Debugging mobile

Note: the below is only true for Chrome < 32. Starting with Chrome 32 someone needs to put a new tutorial here. So far see http://thenextweb.com/google/2013/12/03/google-launches-beta-chrome-devtools-mobile-lets-developers-debug-web-apps-via-emulation-screencasting/#!svtBs . Most of the below still applies, but the UI changed.

Debugging a (skrollr) website on mobile is a pain. Especially when you're new to skrollr and don't know what the #skrollr-body is about. Here's a handy tip: unless you're debugging device/os specific bugs, you can easily debug mobile with Chrome on desktop. Just switch your user-agent to mobile (e.g. iOS) and enable Emulate touch events and skrollr will switch to mobile mode. Refresh the page after changing the settings in order for them to take effect. Here's a screenshot of the Chrome developer tools (open this settings overlay with the little gear in the bottom right corner):

Only animate when scrolling down

skrollr.init({
    beforerender: function(data) {
        return data.curTop > data.lastTop;
    }
});

Output the current scroll position

Put a little scroll position indicator top right.

.scrollpos{
	position: fixed;
	z-index: 100;
	background: #ffffff;
	top: 0;
	right: 0;
}

<div class="scrollpos"></div>

skrollr.init({
    render: function(data) {
        document.querySelector('.scrollpos').innerHTML = data.curTop;
    }
});