Horizontal Scroll no jQuery

by Marco Abate

HTML

<div class="carousel-wrapper">
    <div class="items-wrap images">
        <img src="//lorempixel.com/300/600/people/"/>
        <img src="//lorempixel.com/300/600/food/"/>
        <img src="//lorempixel.com/300/600/people/"/>
        <img src="//lorempixel.com/300/600/food/"/>
        <img src="//lorempixel.com/300/600/people/"/>
        <img src="//lorempixel.com/300/600/food/"/>
        <img src="//lorempixel.com/300/600/people/"/>
        <img src="//lorempixel.com/300/600/food/"/>
    </div>
</div>

CSS

body {
    margin: 0;
}
.carousel-wrapper {
    display: inline-block;
    width: 100%;
    margin: 0;
}
.carousel-wrapper .items-wrap {
    display: inline-block;
    overflow-y: hidden;
    overflow-x: visible;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    height: 2em;
    padding: 0;
}
.carousel-wrapper .items-wrap.images {
    height: auto;
}
.carousel-wrapper .items-wrap * {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}
.carousel-wrapper .items-wrap.images img {
    width: 100%;
    margin-left: -4px;
}
.carousel-wrapper .items-wrap.images img:first-child {
    margin-left: 0;
}

JavaScript

var scrollH = $('.items-wrap');

scrollH[0].onscroll = function() {
    console.log(this.scrollLeft);
}