Horizontal Scroll Mousewheel In jQuery

Demo    Download
File Size: 1.02 KB
Views Total: 6291 views
Last Update:February 21, 2021
Publish Date: December 10, 2019
Official Website: Go to website
License: MIT
Plugin Author: madroid

on mouse wheel scroll move web page horizontal position with jquery. currently i’m developing a horizontal scroll mousewheel in website that can enable my mouse scroll to scroll to the left and right. it is simple to use and fully customize in jquery. In the demo above, each time you scrolled on a page, all that happened was an appear based on the direction of the scroll. To make the value increase or decrease scroll speed the event with a value  $('#box').hScroll(50); like this:

Table of Contents

How to use it :

1. Add Simple Html :

<div id="box">
    <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
   <div class="item">5</div>
   <div class="item">6</div>
   <div class="item">7</div>
   <div class="item">8</div>
   <div class="item">9</div>
    <div class="item">7</div>
   <div class="item">8</div>
   <div class="item">9</div>

2. Add With Css for better design :

#box {
    overflow-y: visible;
    overflow-x: auto;
    white-space: nowrap;
    vertical-align: text-top;
    margin: 0;
    padding: 0;
    clear: both;
    border-spacing: 5px;
.item {
    display: table-cell;
    min-width: 240px;
    width: 240px;
    font-size: 140px;
    border: 2px solid #d1d1d1;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    white-space: normal;
    line-height: 1.6;
    vertical-align: top;
    text-align: center;

3. Add JQuery Library :

<scrip src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>

4. Add With jQuery Script :

jQuery(function ($) {
    $.fn.hScroll = function (amount) {
        amount = amount || 120;
        $(this).bind("DOMMouseScroll mousewheel", function (event) {
            var oEvent = event.originalEvent, 
                direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta, 
                position = $(this).scrollLeft();
            position += direction > 0 ? -amount : amount;

$(document).ready(function() {
    $('#box').hScroll(40); // You can pass (optionally) scrolling amount


Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.