I build a website with skrollr, which is my personal plugin of the year.
It works well in most situations except on an iPad mini. I haven't had the opportunity to test it on other iOS devices yet.
The problem is, that the site doesn't start scrolling until after I stopped scrolling. So, basically, I put my finger onto the screen and start dragging, and nothing happens. Only when I stop scrolling and pull my finger away from the screen, the site starts scrolling the correct way.
<div id="skrollr-body">
<div id="scene1" class="scene" data-anchor-target="#scene1-anchor"
data-0-top="visibility: visible"
data--1950-top="visibility: visible"
data--2000-top="visibility: hidden">
</div>
</div>
#skrollr-body {
height: 100%;
position: fixed;
width: 100%;
}
.scene {
width: 100%;
height: 100%;
top: 0%;
left: 0%;
position: absolute;
background-color: white;
}
<script>
var s = skrollr.init({
smoothScrolling: true,
keyframe: function(element, name, direction) {
// add videos only after scrolling for a bit
},
mobileCheck: function() {
// makes no difference :-(
return false;
}
});
</script>
</body>
Is this behavior to be expected? How can I make the browser scroll while I still have the finger on the screen?
Apparently, it's not a bug, it's a feature :-/
According to this answer to a similar question the whole "only move after touch event is over" is standard behavior for iPads.
So I guess I could go and rig something up for skroller to react not to the scroll event, but instead to react to the touchstart / touchend events. Very unsatisfying...