Search code examples
javascriptiosskrollr

skrollr page only moves after scrolling on iOS device


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?


Solution

  • 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...