iscroll hscroll

by amindunited

HTML

<!-- the div that iScroll references (used as 'clipping area', or mask) -->
<div id="wrapper">
    <!-- a container that (the width should be set to the full scroll width) -->
	<div id="scroller">
		<ul id="thelist" class="clearfix">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.1/iscroll-min.js"> </script>

CSS

//.wrapper { height: 100px; overflow-y: hidden; overflow-x: scroll; }
.wrapper ul { list-style: none; margin: 0; padding: 0; }
.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

.wrapper ul { 
    height: 100px; 
    //overflow-y: hidden; 
    //overflow-x: hidden;//auto; 
    display: block; 
    white-space: nowrap;
    width: auto;
}

.wrapper ul li { 
    box-sizing: border-box;
    list-style: none; 
    height: 100px; 
    width: 80px; 
    background-color: rgba(127, 127, 127, .5);
    text-align: center;
    line-height: 100px;
    border: solid 1px #666666;
    display: inline-block;
}


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

#scroller {
	width:384px;
	height:100%;
	float:left;
	padding:0;
}

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

#scroller li {
	display:block;
	vertical-align:middle;
	float:left;
	padding:0 10px;
	width:80px;
	height:100%;
	border-left:1px solid #ccc;
	border-right:1px solid #fff;
	background-color:#fafafa;
	font-size:14px;
    box-sizing: border-box;
}

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

//
// create the scroller
/*
    myScroll = new IScroll('#wrapper', {
        scrollX: true,//Set to only horiziontal scroll
        scrollY: false,//turn of vertical scroll
        snap: '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('ScrolEnd');

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



$(function(){
    var li_width = $('#thelist li').first().outerWidth();
    console.log("Widthd ", li_width);
    var num_list_elements = $('#thelist li').length;
    var scroller_width = $('#scroller').width(li_width * (num_list_elements))
    
    myScroll = new IScroll('#wrapper', {
        scrollX: true, 
        scrollY: false,
        snap: true
    });
    
    $(window).resize(function() {
        console.log("on resize");
        var ten_per = $(window).width() / 9;
        //$('li').width(ten_per);
//        myScroll.refresh();
        
    });
    
    myScroll.on('scrollEnd', function(e){
        console.log("scroll end !", e, this, $('#wrapper').width());
//        $(this).
        if (myScroll.x < (0-$('#scroller').width()) ) {
            console.log("< ");
        }
        console.log("...", myScroll.x);
    });
    
    
    
});