JSFiddle - React, Tailwind, and code Playground

by manseuk

HTML

<script src="http://cubiq.org/dropbox/iscroll4/src/iscroll.js"></script>
<div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div>
<div id="wrapper">
    <div id="scroller">
    
        <!-- wrapper one -->
        
        <div id="wrapper1">
            <div id="scroller1">
                <ul id="thelist1">
                    <li><strong>1.</strong> <em>A robot may not injure a human being or, through inaction, allow a human being to come to harm.</em></li>
                    <li><strong>2.</strong> <em>A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.</em></li>
                    <li><strong>3.</strong> <em>A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.</em></li>
                    <li><strong>Zeroth Law:</strong> <em>A robot may not harm humanity, or, by inaction, allow humanity to come to harm.</em></li>
                </ul>
            </div>
        </div>
        <div id="nav1">
            <div id="prev1" onclick="myScroll1.scrollToPage('prev', 0);return false">&larr; prev</div>
            <div class="indicator-wrapper">
                <ul id="indicator1">
                    <li class="active">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>
            <div id="next1" onclick="myScroll1.scrollToPage('next', 0);return false">next &rarr;</div>
        </div>
        
        <!-- wrapper two -->
        
        <div id="wrapper2">
            <div id="scroller2">
                <ul id="thelist2">
                    <li><strong>1.</strong> <em>A robot may not injure a human being or, through inaction, allow a human being to come to harm.</em></li>
                    <li><strong>2.</strong> <em>A robot must obey any orders given to it by human beings, except where such orders would conflict with the First...

CSS

body,ul,li {
    padding:0;
    margin:0;
    border:0;
}

body {
    font-size:12px;
    -webkit-user-select:none;
    -webkit-text-size-adjust:none;
    font-family:helvetica;
}

#header {
    position:absolute; z-index:2;
    top:0; left:0;
    width:100%;
    height:45px;
    line-height:45px;
    background-color:#d51875;
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
    background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
    background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
    padding:0;
    color:#eee;
    font-size:20px;
    text-align:center;
}

#header a {
    color:#f3f3f3;
    text-decoration:none;
    font-weight:bold;
    text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}

#footer {
    position:absolute; z-index:2;
    bottom:0; left:0;
    width:100%;
    height:48px;
    background-color:#222;
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
    background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
    background-image:-o-linear-gradient(top, #999, #666 2%, #222);
    padding:0;
    border-top:1px solid #444;
}

#wrapper {
    position:absolute; z-index:1;
    top:45px; bottom:48px; left:0;
    width:100%;
    background:#aaa;
    overflow:auto;
}

#scroller {
    position:absolute; z-index:1;
/*    -webkit-touch-callout:none;*/
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    width:100%;
    padding:0;
}

#scroller ul {
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    text-align:left;
}

#scroller li {
    padding:0 10px;
    height:40px;
    line-height:40px;
    border-bottom:1px solid #ccc;
    border-top:1px solid #fff;
    background-color:#fafafa;
    font-size:14px;
}

#myFrame {
    position:absolute;
    top:0; left:0;
}

/* Wrapper 1 */

#wrapper1, #wrapper2, #wrapper3 {
    width:100%;
    height:160px;
 ...

JavaScript

var myScroll;
var myScroll1;
var myScroll2;
var myScroll3;

function loaded() {

    myScroll = new iScroll('wrapper');
    
    myScroll1 = new iScroll('wrapper1', {
        snap: true,
        momentum: false,
        hScrollbar: false,
        onScrollEnd: function () {
            document.querySelector('#indicator1 > li.active').className = '';
            document.querySelector('#indicator1 > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
        }
     });
     
     myScroll2 = new iScroll('wrapper2', {
        snap: true,
        momentum: false,
        hScrollbar: false,
        onScrollEnd: function () {
            document.querySelector('#indicator2 > li.active').className = '';
            document.querySelector('#indicator2 > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
        }
     });
     
     myScroll3 = new iScroll('wrapper3', {
        snap: true,
        momentum: false,
        hScrollbar: false,
        onScrollEnd: function () {
            document.querySelector('#indicator3 > li.active').className = '';
            document.querySelector('#indicator3 > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
        }
     });

}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);