Horizontal Scroll Mousewheel In jQuery

Layout
Horizontal-Scroll-Mousewheel-In-jQuery
File Size: 1.02 KB
Views Total: 13898 views
Last Update:March 18, 2023
Publish Date: December 10, 2019
Official Website: Go to website
License: MIT
Plugin Author: madroid
Demo    Download

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:

 

How to use it :

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>
 </div>

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;
}

Add JQuery Library :

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

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;
            $(this).scrollLeft(position);
            event.preventDefault();
        })
    };
});

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

Done

Thanks for make jQuery plugin is developed by madroid For more Helpfull for users, please check the demo page or visit the official website.

Mady

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.