Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including jquery.rsOverview with all npm packages installed. Try it out:

jquery.rsOverview lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("jquery.rsOverview/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

jquery.rsOverview v1.0.2

Shows current location within the page

#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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free