jQuery Plugin to Scroll div Horizontally with Mouse Wheel

Plugin Preview

Share this:

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

Plugin:	jInvertScroll
Author:	Alex Franzelin
Licence:	MIT Licence
Published:	January 18, 2024
Repository:	Fork on GitHub
Dependencies:	jQuery 1.3.1 or Latest version
File Type:	zip archive (HTML, CSS & JavaScript and Images)
Package Size:	489 KB

Demo Download

How to Use Plugin to Scroll div Horizontally :

1. There is no tough job to getting started with jInvertScroll to move / scroll div horizontally. To start, first load the jQuery and jInvertScroll‘s plugin file into HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<!--  jInvertScroll Js -->
<script src="src/jquery.jInvertScroll.js"></script>

2. After that, create a div element and put your contents (like images or whatever you want) into it.

    <div class="horizon scroll">
        <img src="images/horizon.png" alt="" />
    </div>
    <div class="middle scroll">
        <img src="images/middle.png" alt="" />
    </div>
    <div class="front scroll">
        <img src="images/front.png" alt="" />
    </div>

3. Initialize the plugin in jQuery document ready / anonymous function and done.

 (function($) {
        var elem = $.jInvertScroll(['.scroll'],        // an array containing the selector(s) for the elements you want to animate
            {
            height: 6000,                   // optional: define the height the user can scroll, otherwise the overall length will be taken as scrollable height
            onScroll: function(percent) {   //optional: callback function that will be called when the user scrolls down, useful for animating other things on the page
                console.log(percent);
            }
        });

        $(window).resize(function() {
          if ($(window).width() <= 768) {
            elem.destroy();
          }
          else {
            elem.reinitialize();
          }
        });
    }(jQuery));

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.