CB Top 10

by pphheerroonn

HTML

<div id="container" class="scroller">
  testing one two
  <div id="outer-scroller">
    <div id="scroller">
    <!--COPY-->
      <div class="product">
        <img src="http://compub.com/wp-content/uploads/2015/11/ATV4.jpg">
        <div class="number">
          <h4>1</h4>
        </div><!--number end-->
        <div id="description">
Apple TV Fourth Generation
        </div><!--description end-->
      </div><!--product end-->
    <!--COPY-->
          <div class="product">
        <img src="http://compub.com/wp-content/uploads/2015/11/ATV4.jpg">
        <div class="number">
          <h4>2</h4>
        </div><!--number end-->
        <div id="description">
Apple TV Fourth Generation
        </div><!--description end-->
      </div><!--product end-->
            <div class="product">
        <img src="http://compub.com/wp-content/uploads/2015/11/ATV4.jpg">
        <div class="number">
          <h4>3</h4>
        </div><!--number end-->
        <div id="description">
Apple TV Fourth Generation
        </div><!--description end-->
      </div><!--product end-->
            <div class="product">
        <img src="http://compub.com/wp-content/uploads/2015/11/ATV4.jpg">
        <div class="number">
          <h4>4</h4>
        </div><!--number end-->
        <div id="description">
Apple TV Fourth Generation
        </div><!--description end-->
      </div><!--product end-->
            <div class="product">
        <img src="http://compub.com/wp-content/uploads/2015/11/ATV4.jpg">
        <div class="number">
          <h4>10</h4>
        </div><!--number end-->
        <div id="description">
Apple TV Fourth Generation
        </div><!--description end-->
      </div><!--product end-->
            <div class="product">
        <img src="http://compub.com/wp-content/uploads/2015/11/ATV4.jpg">
        <div class="number">
          <h4>1</h4>
        </div><!--number end-->
        <div id="description">
Apple TV Fourth Generation
        </div><!--description...

CSS

#container {
  width: 500px;
  padding: 100px, 0px;
  background: grey;
}

#outer-scroller {
  overflow-x: scroll;
  overflow-y: hidden;
}

#scroller {
  width: 3000px;
  height: 250px;
  background: white;
}

.product {
  width: 250px;
  height: 250px;
  margin-left: 15px;
  float: left;
  background: pink;
}

.product img {
  margin-left: 50px;
  margin-top: 20px;
  width: 200px;
}

.number {
  width: 50px;
  height: 50px;
  padding: 5px;
  border-radius: 2em;
  top: 50%;
  transform: translateY(-200%);
  background: red;
}

.number h4 {
  color: #fff;
  text-align: center;
}

#description {
  padding:5px;
  margin: -60px 5px auto;
  background: red;
  color: white;
  text-align: center;
}

JavaScript

document.querySelector('.scroller').addEventListener('mousewheel', function(e) {
  e.stopPropagation();
  var max = 3000;//this.scrollWidth - this.offsetWidth; // this might change if you have dynamic content, perhaps some mutation observer will be useful here

  if (this.scrollLeft + e.deltaX < 0 || this.scrollLeft + e.deltaX > max) {
    e.preventDefault();
    this.scrollLeft = Math.max(0, Math.min(max, this.scrollLeft + e.deltaX));
  }
}, false);