Scroll Page Horizontally With Mouse Wheel

1) Load jQuery and the Mouse Wheel plugin

Mouse Wheel plugin is here.

In jQuery, we can create any element tag move horizontally using the built-in function scrollLeft() function for scrolling the scrollbar horizontally similar to each of two the position which is set as the parameter or without setting the position which would define the position in pixel number of the scrollbar.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

2) Attach mousewheel event to body

The “30” represents speed. preventDefault make sure the page will not scroll down.

$(function() {
   $("body").mousewheel(function(event, delta) {
      this.scrollLeft -= (delta * 30);
 
      event.preventDefault();
   });
});

Codepen Example

Also Read:

• Notification system using jQuery, PHP, and MySQL
• Remove class in foreach with jquery
• How to Download File using JQuery
• How to upload video file with a progress bar with PHP using ajax
• php contact form with jquery validation