jQuery Horizontal Scroll Plugin

1. Introduction

jInvertScroll is a lightweight jQuery plugin that allows you to scroll the website horizontally, using the vertical scroll bar. The plugin is super easy to set up and requires nearly no configuration.

Jquery horizontal scrolling

2. Plugin Overview

Library	jInvertScroll
Author	Alex Franzelin
Licence	MIT Licence
Repository	GitHub
Dependencies	jQuery 1.3.1 or Latest version

Demo

3. How to install and use jInvertScroll jQuery plugin

Follow the below steps to install jInvertScroll jQuery plugin on your website.

3.1. Include the css file, jQuery and the Plugin:

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

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

3.2. Create elements that you want to scroll, for example:

<div class="container">
    <div class="header">
        <div class="logo">
            <a href="//jInvertScroll">
                <img src="images/jInvertScroll.png" alt="jInvertScroll" />
            </a>
        </div>

        <div class="credits">
            <a href="http://www.pixxelfactory.net">
                <img src="images/pixxelfactory.png" alt="Pixxelfactory" />
            </a>
        </div>
    </div>

    <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">
        <h1 class="intro">Scroll down</h1>

        <div class="options page">
        </div>
    </div>
</div>

3.3. Initialize the plugin in document ready function:

(function($) {
    $.jInvertScroll(['.scroll']);
}(jQuery));

4. Conclusion

In this article, we presented jInvertScroll jQuery plugin used to scroll the website horizontally. The plugin should be useful for everyone who wants to stand out from the crowd and use not to use an atypical page scrolling. The horizontal scrolling is also an awesome way to present a gallery of images.