iscroll horizontal scroll

by vi161

HTML

<!-- the div that iScroll references (used as 'clipping area', or mask) -->
<div id="example_1" class="horizontal_scroll_wrap">
    <!-- a container that (the width should be set to the full scroll width) -->
	<div class="scroller">
		<ul class="clearfix">
            <li data-value="0">01</li>
            <li data-value="1">02</li>
            <li data-value="2">03</li>
            <li data-value="3">04</li>
            <li data-value="4">05</li>
            <li data-value="5">06</li>
            <li data-value="6">07</li>
            <li data-value="7">08</li>
            <li data-value="8">09</li>
            <li data-value="9">10</li>
            <li data-value="10">11</li>
            <li data-value="11">12</li>
            <li data-value="12">13</li>
            <li data-value="13">14</li>
            <li data-value="14">15</li>
            <li data-value="15">16</li>
            <li data-value="16">17</li>
            <li data-value="17">18</li>
            <li data-value="18">19</li>
            <li data-value="19">20</li>
        </ul>
    </div>
</div>

<!-- the div that iScroll references (used as 'clipping area', or mask) -->
<div id="example_2" class="horizontal_scroll_wrap">
    <!-- a container that (the width should be set to the full scroll width) -->
	<div class="scroller">
		<ul class="clearfix">   
            <li><h1> Page 01</h1></li>
            <li><h1> Page 02</h1></li>
            <li><h1> Page 03</h1></li>
            <li><h1> Page 04</h1></li>
            <li><h1> Page 05</h1></li>
            <li><h1> Page 06</h1></li>
            <li><h1> Page 07</h1></li>
            <li><h1> Page 08</h1></li>
            <li><h1> Page 09</h1></li>
            <li><h1> Page 10</h1></li>
            <li><h1> Page 11</h1></li>
            <li><h1> Page 12</h1></li>
            <li><h1> Page 13</h1></li>
            <li><h1> Page 14</h1></li>
            <li><h1> Page 15</h1></li>
            <li><h1> Page 16</h1></li>
            <li><h1> Page...

CSS

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

.horizontal_scroll_wrap {
    width: 100%;
    border: solid 1px grey;
}
.horizontal_scroll_wrap > .scroller { 
    /*this will need to be set to the number of elements * element_width */
    width: 1080px; 
    height: 100%;
}
.horizontal_scroll_wrap > .scroller > ul { list-type: none; height: 100%; }
.horizontal_scroll_wrap > .scroller > ul > li { float: left; 
    box-sizing: border-box; }

#example_1.horizontal_scroll_wrap > .scroller > ul > li  { 
    width: 30px;
    height: 30px;
    border: solid 1px rgba(126, 126, 126, .5);
    background-color: rgba(256, 256, 127, 1);
    text-align: center;
    color: purple;
    line-height: 30px;
    box-sizing: border-box;
}
#example_2.horizontal_scroll_wrap {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 127, .5);
}
#example_2.horizontal_scroll_wrap > .scroller > ul {
    height: 100%;
}
#example_2.horizontal_scroll_wrap > .scroller > ul > li  { 
    width: 100px;
    height: 100%;
    background-color: rgba(127, 127, 127, .5);
    border-left: solid 1px yellow;
    box-sizing: border-box;
    color: white;
    font-weight: bold;
    text-align: center;
}

JavaScript

//On page / element load:
//...if the number of elements is dynamic

// the width of the 'scroller' should be:
// the width of the elements * the number of elements
$(function(){
    
    var example_1_li_widths = $('#example_1 > .scroller > ul > li').outerWidth();
    var example_1_num_elements = $('#example_1 > .scroller > ul > li').length;
    $('#example_1 > .scroller').width( example_1_li_widths * example_1_num_elements );

});

//
// create the scroller
$(function(){
    example_1 = new IScroll('#example_1', {
        scrollX: true,//Set to only horiziontal scroll
        scrollY: false,//turn of vertical scroll
        snap: false,//'li',//'snap' scrolling to element widths (values: false | true or element tagName)
        mouseWheel: true,//Enable disable mouse wheel
        scrollbars: false,//show hide scrollbars
        bounce: true,//enable 'bouce' animation
        preventDefault: true,//prevent default scroll events from triggering 
        
    });
});

//If you need to listen for events:
//myScroll.on('scrollEnd', function(){});

/* events include:
    beforeScrollStart
    scrollCancel
    scrollStart
    scroll
    scrollEnd
    flick
    zoomStart
    zoomEnd
*/
//http://iscrolljs.com/#custom-events
//goToPage(10, 0, 1000);


/*
 *
 * Example 2
 *
 */

//On page / element load:
//...if the number of elements is dynamic

// the width of the 'scroller' should be:
// the width of the elements * the number of elements
$(function(){
    var doc_width = Math.round($('#example_2').width());
    $('#example_2 > .scroller > ul > li').width(doc_width);
    var example_2_li_widths = $('#example_2 > .scroller > ul > li').outerWidth();
    var example_2_num_elements = $('#example_2 > .scroller > ul > li').length;
    $('#example_2 > .scroller').width( Math.round(example_2_li_widths * example_2_num_elements) );
    
});

//
// create the scroller
$(function(){
    example_2 = new IScroll('#example_2', {
        scrollX: true,//Set to only horiziontal scroll
...