jquery

by Anton Chukanov

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<div class="wrapper">
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
<div class="inline-div"></div>
</div>

CSS

.wrapper {
  overflow-x: auto;
  white-space: nowrap;
}

.inline-div {
  display: inline-block;
  width: 200px;
  height: 150px;
  background-color: #80DEEA;
  margin: 10px;
}
.inline-div:nth-child(even) {
  background-color: #F48FB1;
}

JavaScript

$('.wrapper').mousewheel(function(event, delta) {
      this.scrollLeft -= delta * 200;
      event.preventDefault();
});