Nikica Asanin Nikica Asanin - 1 month ago 22
CSS Question

JS - horizontal scroll

Trying to make horizontal scroll on some list but I get error - ''Uncaught TypeError: $(...).mousewheel is not a function''.
My JS is:

<script>
$(document).ready(function () {
$('.item-list').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 40);
e.preventDefault();
});

});

</script>
<script type='text/javascript' src='/wp-content/themes/engrave-lite-child/js/jquery.mousewheel.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

Answer

Add the jquery.mousewheel.js source file after the jQuery source:

.item-list {
  overflow: auto;
  width: 100%;
}
.i-con {
  width: 3000px;
  background: orange;
  height: 100px;
}
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js'></script>

<div class="item-list">
  <div class="i-con"></div>
</div>
<script>
  $(document).ready(function() {
    $('.item-list').mousewheel(function(e, delta) {
      this.scrollLeft -= (delta * 40);
      e.preventDefault();
    });

  });
</script>