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.
- Custom horizontal scroll bar.
- Custom vertical scroll bar.
- Custom two directional scroll bar in a single control.
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.
- 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
mousewheelproperty 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:
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).
jquery-rsOverview plugin demoMake your own horizontal, vertical or bidirectional scroll bar.<!-- bidirectional scroll bar for the whole document --><!-- vertical, horizontal and bidirectional scroll bars -->
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.