luis-almeida/unveil

Scroll event not firing on mobile Chrome

faebe opened this issue · 4 comments

faebe commented

Unveil.js uses a "on(scroll)" to load new media. Since the release of iOS 8 mobile Safari fixed the scroll event issue (http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/), but Chrome for iOS and Android still only fires the scroll event at the moment the drag stops. This means new images are only loaded, when you stop scrolling on your phone. Any fix or workaround for that?

michaelx commented

Second that, a fix would be great.

faebe commented

Temporary fix: Use skrollr.js

I included scrollr.js (originally intended for parallax scrolling), gave the main container id="skrollr-body"and started skrollr when Chrome for iOS is detected:

if(navigator.userAgent.match('CriOS')){
var s = skrollr.init();
}

Skroller replaces the native scroll with an content offset. Not perfect but a temporary fix. If anyone can extract only the scroll replacement from skrollr, this would be a little bit faster....

faebe commented

UPDATE: NEW FIX – ISCROLL.JS

You can use iscroll.js 5 (http://cubiq.org/iscroll-5) to fix loading for all mobile browsers not supporting continous scroll events (in the following example only Chrome iOS [CriOS]).

STEP 1: Include jquery and iscroll in your HTML head

<script type="text/javascript" src="/jquery.min.js"></script>
<script type="text/javascript" src="/iscroll.js"></script>

STEP 2: Put your page inside a wrapper div with id="page" (used in JS in Step 4)
You can NOT use a div with the id "wrapper", because the wrapper id is used by iscroll and added later on via jquery (Step 4)

<body>
    <div id="page">
        <!-- Your content -->
    </div>
</body>

STEP 3: Add this to your CSS

#wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    /* Prevent native touch events on Windows */
    -ms-touch-action: none;

    /* Prevent the callout on tap-hold and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}

#scroller {
    position: absolute;

    /* Prevent elements to be highlighted on tap */
    -webkit-tap-highlight-color: rgba(0,0,0,0);

    /* Put the scroller into the HW Compositing layer right from the start */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

STEP 4: Use this script at the end of your body element
You can add more userAgents...

// Fix Chrome iOS
if(navigator.userAgent.match('CriOS')){
    // Wrap content in iScroll elements
    $( '#page' ).wrap( '<div id="wrapper"><div id="scroller"></div></div>' );

    // Start iScroll
    myScroll = new IScroll('#wrapper', {
        click: true
    });

    // Prevent default scroll
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);        
}
domsie commented

Hi,
first: great script!
But: on my iphone 6 the scroll event dont fire. Is the fix with iscroll5.js actual? Or is there a new unveil version with a fix itself?