iScroll test

HTML

<script src="https://rawgithub.com/cubiq/iscroll/master/build/iscroll-probe.js"></script>
<div id="scroller">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
    </ul>
    <div id="slider">slider</div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
}

#scroller {
    position: fixed;
    width: 100%;
    height: 100%;
    
    overflow: hidden;
    background: red;
}

ul {
    display: block;
    padding: 0;
    margin: 0;
    
    list-style: none outside;
}

li {
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
}

li:nth-child(odd) {
    background: lightgrey;
}

li:nth-child(even) {
    background: grey;
}

#slider {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 200px;
    -webkit-transform: translate3d(0, 0, 0);
    
    background: green;
}

JavaScript

var scroll = new IScroll('#scroller', {
    bounce: false,
    momentum: true,
    mouseWheel: true,
    keyBindings: true,
    probeType: 3
});

var slider = $('#slider');

scroll.on('scroll', function(e) {
    console.log('scroll', scroll.y);
    slider.css({'transform': 'translateX(' + -scroll.y + 'px)'});
});

// prevent touch events from fighting with iScroll
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);