【jQuery】iScroll4のネスト

このスレッドもチェック https://groups.google.com/forum/#!searchin/iscroll/nested/iscroll/z4O_joqA_EI/drxE2CLvP_UJ

by tea4two

HTML

<script src="http://napotopia.kodingen.com/ipad/js/iscroll.js"></script>
<div id="parentScroller" class="iscroll">
    <div class="scroller">
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor volutpat nulla et vestibulum. Proin eget mauris nec lorem sodales sagittis. Mauris ultrices erat blandit leo dictum nec porta arcu ultricies. Aenean tincidunt accumsan mi vitae ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dui orci, malesuada et faucibus nec, viverra eu erat. Donec fermentum adipiscing semper. Maecenas non commodo massa.
        </p>
        <div id="childScroller" class="iscroll">
            <div class="scroller">
                <p>
                Fusce rutrum tristique nulla, ut lacinia velit volutpat sit amet. Pellentesque at tellus non sapien aliquet tincidunt at a purus. Nulla fermentum nulla id nulla luctus posuere. Cras quis neque quis massa fringilla pellentesque. Vivamus sagittis cursus sem, eu sodales orci blandit et. Integer viverra odio ac mi pretium tincidunt luctus mauris fringilla. Vivamus massa nulla, semper at tempus et, mollis eget ligula. Proin in sem tortor, eu placerat sapien. Cras consectetur ligula eget risus mollis sagittis. Vivamus quis neque at tellus tincidunt consectetur at eu velit. In feugiat congue tellus eu aliquet. Aliquam ornare leo ac augue dignissim placerat. Aliquam quis arcu ut felis hendrerit placerat sit amet varius quam. Etiam bibendum molestie tellus eu sagittis.
                </p>
                <p>
                Etiam consequat pharetra lectus, vel imperdiet arcu placerat ac. Nulla nisi dolor, volutpat ac aliquam aliquet, aliquet sit amet justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam iaculis est id tellus placerat quis venenatis leo faucibus. Sed ornare mauris non lorem gravida blandit. Duis tincidunt ipsum at lorem commodo hendrerit. Nullam diam quam, dignissim at tristique...

CSS

#parentScroller {
    background:orange;
    height:500px;
    overflow:hidden;
}

#childScroller {
    background:red;
    color:#fff;
    height:200px;
    overflow:hidden;
}

JavaScript

var scrollClass = 'iscroll',
    parentScroller, childScroller;

var parentScrollToggle = function (e, status) {
        
        var $parents = $(e.target).parents('.' + scrollClass),
            parentsLength = $parents.length,
            parentId = $parents.eq(parentsLength - 1).attr('id'),
            lcpid = parentId.toLowerCase();
    
        if (status === 'enable') {
            parentScroller.vScroll = true;
            parentScroller.enable();
        } else {
            parentScroller.vScroll = false;
            parentScroller.disable();
        }
};

$(function() {
    parentScroller = new iScroll('parentScroller', { 
        vScrollbar : false
    });
    
    childScroller  = new iScroll('childScroller', { 
        vScrollbar : false, 
        onBeforeScrollStart : function(e) { 
            parentScrollToggle(e, 'disable');
        }, 
        onBeforeScrollEnd : function(e) {
            parentScrollToggle(e, 'enable');
        }
    });
});