Horizontal Scroll Mousewheel In jQuery

Layout
Demo    Download
Horizontal-Scroll-Mousewheel-In-jQuery
File Size: 1.02 KB
Views Total: 1979 views
Last Update:March 1, 2020
Publish Date: December 10, 2019
Official Website: Go to website
License: MIT

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 :

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

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


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.