iPad Scroll Fix

by kuyabiye

JavaScript

(function () {
    var SITE = SITE || {}
    SITE.ipadScrollFix = {
        selector: 'body',
        init: function () {
            var $content = $(this.selector);

            this.handleResize($content);

        },
        handleResize: function ($content) {
            var base = this;

            this.height = $(window).height() - $(".navbar").height();
            // Height needs to be set, to allow for scrolling -
            //this is the fixed container that will scroll
            $content.height(this.height - 10);

            // Temporarily blow out the inner content, to FORCE ipad to scroll during
            resizing
            // This is a timing issue where the inner content is not big enough
            during resize post orientation to require the outer DIV to scroll
            this.wrapper = $content.find('.wrapper');

            // Set the heights back to something normal
            // We have to "pause" long enough for the re-orientation resize to finish
            window.setTimeout($.proxy(base.delayFix, base), 10);
        },

        delayFix: function () {
            var base = this;
            // Inner divs force the outer div to always have at least something to
            scroll.This makes the inner DIV always "rubber-band"
            and prevents
            // the page from scrolling all over the place for no reason.
            // The height of the inner guy needs to be AT LEAST as big as the
            container and actually a nip bigger to cause the
            // scrollable area to 'rubber band' properly
            this.wrapper.height(base.height + 20);

        }
    }

    window.SITE = SITE;
})();