Tips

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

Debugging mobile

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):

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;
    }
});