Negligible Psychological Misery


    1.0.2 • Public • Published

    jquery-rsOverview Build Status

    Displays two rectangles, one inside the other. The outer rectangle represents the content (document), while the inner rectangle represents the viewport (browser window).

    It provides to the user a visual overview of where the viewport is located within the document as well their relative sizes.

    Use cases

    • Custom horizontal scroll bar.
    • Custom vertical scroll bar.
    • Custom two directional scroll bar in a single control. rsoverview

    It works for the whole document page as well any overflowed element.
    Also it can bookmark locations in the current page for a later visit.
    You can use the beforeunload event to save the bookmarks of tehe current page, just before a new page is loaded. After a new page is loaded, you can get their new bookmarks, thus never loosing track of the bookmarks.

    Check out a demo.

    Key Features

    • Works with the <body> (whole page) or any other element;
    • Optionally auto hides itself if the viewport is larger than the content;
    • Viewport size is updated when browser is resized;
    • Overrides the native mouse wheel speed (if mousewheel property is not zero);
    • Bookmark management:
      • Toogle bookmarks at the current location;
      • Scroll to next or previous bookmark;
      • Clear all bookmarks;
      • Load and save bookmarks;
    • Highly customizable:
      • Any markup you want, as long is not inline;
      • Free to style the way you want in CSS;
      • Strong event driven support;
    • Responsive design, suitable for any window sizes;


    You can install from npm:

    npm install jquery.rsOverview --save

    or directly from git:

    <script src=""></script>

    or you can download the Zip archive from github, clone or fork this repository and include jquery.rsOverview.js from your local machine.

    You also need to download jQuery. In the example below, jQuery is downloaded from Google cdn.


    First, you must run grunt. Grunt among other tasks, minimizes the js file and places all production files inside a new dist folder.

    Open the following file from src/demo/demo.html (or you can try it live here).

    <!DOCTYPE html>
        <script src=''></script> 
        <script src='../../dist/jquery.rsOverview.min.js'></script> 
            #doc {
                position: fixed;
                width: 5em;
                height: 15em;
                right: 1em;
                top: 1em;
            #overflowed {
                display: inline-block;
                width: 30em;
                height: 20em;
                border: 1px grey dashed;
                overflow: hidden; /* hide the native scroll bars. I want to use custom ones instead */
            #element {
                position: absolute;
                left: 32em;
                top: 10em;
                width: 10em;
                height: 8em;
            #elementHoriz {
                position: absolute;
                left: .5em;
                width: 29em;
                top: 26.2em;
                height: 1em;
            #elementVert {
                position: absolute;
                top: 7.2em;
                left: 29.6em;
                height: 19em;
                width: 1em;  
            .content {
                background-color: rgba(200, 100, 100, .5);
                cursor: crosshair;
            .viewport {
                background-color: rgba(0, 0, 0, .5);
                cursor: move;
            #element .content {
                background-image: url('./bug.jpg');
                background-size: cover;
                overflow: hidden; /* to hide the box-shadow below */
            #element .viewport {
                background-color: transparent;
                box-shadow: 0 0 0 3em rgba(255, 255, 255, .4);
        <h1>jquery-rsOverview plugin demo</h1>
        <p>Make your own horizontal, vertical or bidirectional scroll bar.</p>
        <aside id='doc'></aside> <!-- bidirectional scroll bar for the whole document -->
        <div id='overflowed'>
            <img src='./bug.jpg' width='653' height='436'>
        <!-- vertical, horizontal and bidirectional scroll bars -->
        <aside id='elementVert'></aside>
        <aside id='elementHoriz'></aside>
        <aside id='element'></aside>
            // add some content to the page
            var $body = $('body').css('white-space', 'nowrap');
            for (var i = 0; i < 250; ++i) {
                $body.append('<p>' + new Array(15).join('The quick, brown fox jumps over a lazy dog. --' + i + '--') + '</p>');
            // bidirectional scroll bar for the whole document
            // bidirectional scroll bar for the #overflowed element
                monitor: $('#overflowed')
            // vertical scroll bar for the #overflowed element
                monitor: $('#overflowed'),
                direction: 'vertical'
            // horizontal scroll bar for the #overflowed element
                monitor: $('#overflowed'),
                direction: 'horizontal'


    This project is licensed under the terms of the MIT license

    Bug Reports & Feature Requests

    Please use the issue tracker to report any bugs or file feature requests.


    Please refer to the Contribution page from more information.


    npm i jquery.rsOverview

    DownloadsWeekly Downloads






    Last publish


    • ruisoftware