jQuery Plugin to Scroll div Horizontally with Mouse Wheel

A lightweight jQuery plugin that lets you to scroll div horizontally with mouse wheel or with arrow keys. You can put anything in that div (i.e images, videos or any object) to move horizontally.

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

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

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...