Parallax effect with Stellar.js and iScroll on iOS, bounces back and stuck on certain scrollTop after scroll
Mauro Julián Fernández
I'm developing a web for a client who wants a parallax effect applied to all the foreground elements (no background parallax). This web is 1234px width by like 9000px in height (all images, big background images and PNG with transparencies for the foreground elements) and has a couple of foreground elements. I've achieved this effect using stellar.js with iscroll.js to create a new scrollbar based on iOS. The parallax is smooth and simple, you scroll down, the elements go up and viceversa, but the problem I have (I already contacted the stellar.js developer but I'm still waiting for an answer, hope he see this :) ) is that I've got that bouncy effect that in some situations it stucks my viewport at a certain scrollTop. Lets say, I load the web and everything is ok, but suddenly I go to the top of the page for example (it happens at any scrollTop), it bounces and shows the "checkerboard" like iOS, and then it stops at like a couple of pixels down from the top, when I try to scroll up from there, it bounces back to that location.
I found some posts with this problem searching at Stack Overflow, and the answer that helped me in some way (from start I've got this problem but I couldn't even scroll down) is this one:
iScroll Not scrolling content, just bounces back to top
That post describes the same problem I have with stellar/iscroll, and changing those CSS properties helped me to minimize the bounce, but it still happens. I tried a lot of height combinations to the#wrapper #scroller elements, but following that answer means that my #scroller is like a lot more taller than the content, so when I scroll down I see this huge black background, until it bounces back to the bottom of the content.
I'll provide you with some code, can't share the web because it's not finished and my client asked me to not share it.
This is in the <head>, here I initialize the plugin, I took the template from the stellar.js tutorial on mobile parallax (http://markdalgleish.com/2012/10/mobile-parallax-with-stellar-js/):
<meta name="viewport" content="width=device-width, initial-scale=0.62, maximum-scale=0.62, minimum-scale=0.62, user-scalable=no">
<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/vendor/iscroll.js"></script>
<script src="js/vendor/jquery.stellar.js"></script>
<script type="text/javascript">
function loaded() {
var ua = navigator.userAgent,
isMobileWebkit = /WebKit/.test(ua) && /Mobile/.test(ua);
if (isMobileWebkit) {
$('html').addClass('mobile');
}
$(function loaded(){
var myScroll;
if (isMobileWebkit) {
setTimeout(function () { myScroll = new iScroll('wrapper', { useTransform: true, useTransition: false } ); }, 5000);
setTimeout(function () { myScroll.refresh() }, 10000);
$('#scroller').stellar({
scrollProperty: 'transform',
positionProperty: 'transform',
});
} else {
$.stellar({
horizontalScrolling: false,
});
}
});
};
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 100); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<body onload="loaded()">
<div id="wrapper">
<div id="scroller">
<div id="fg" data-role="content">
<!-- all the backgrounds, I load them with the js preloader and apply them as a background-image -->
<div id='rff-bg0'></div>
<div id='rff-bg1'></div>
<div id='rff-bg2'></div>
<div id='rff-bg3'></div>
<div id='rff-bg4'></div>
<div id='nav-bar' data-position="fixed"> <-- This nav-bar has to be fixed because is used to navigate the web
<!--some buttons here-->
</div>
<!-- lots of divs, these are the foreground parallax elements, all with the data-stellar-ratio="", this is working great -->
</div>
</div>
</div>
</body>CSS, I'll share the specific parts that affect the parallax, both stellar and iscroll plugins, this snippet was also taken from the stellar tutorial mentioned above:
.mobile body {
overflow: hidden;
}
.mobile #wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 9052px;
z-index: -1;
background-color: #000;
}
.mobile #scroller {
height: 20000px;
background-color: #000;
}