JSFiddle - React, Tailwind, and code Playground

by thayes

HTML

<body>
        <div id="page" data-role="page">
            <div id="wrapper">
                <div id="scroller">
                    <img src="http://placekitten.com/320/480" />
                    <img src="http://placekitten.com/320/480" />
                    <img src="http://placekitten.com/320/480" />
                    <img src="http://placekitten.com/320/480" />
                    <img src="http://placekitten.com/320/480" />
                    <img src="http://placekitten.com/320/480" />
                    <img src="http://placekitten.com/320/480" />
                    <img src="http://placekitten.com/320/480" />
                    <img src="http://placekitten.com/320/480" />
                </div>
            </div>
        </div>
    </body>

CSS

#page, #wrapper {
                max-height: 768px;
            }

            #page[data-role="page"] {
                height: 100%;
            }

            #wrapper {
                height: 100%;
            }

JavaScript

$(window).bind('load', function() {
                console.log('Window loaded');
                if (window.zoomer) {
                    $('img').each(function() {
                        console.log('Image ' + $(this).attr('src') + ' height: ' + $(this).height());
                    });
                    console.log('Refreshing zoomer');
                    window.zoomer.refresh();
                }
            });

            jQuery(document).bind('ready pageinit', function() {
                if (window.zoomer) {
                    window.zoomer.refresh();
                }
                else {
                    window.zoomer = new iScroll('wrapper', {
                        zoom: true,
                        bounce: false
                    });
                }
            });