Sublime Text-Style Page Scrollbar With Minimap - Infoscroller

Sublime Text-Style Page Scrollbar With Minimap - Infoscroller
File Size: 821 KB
Views Total: 2483
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Infoscroller is a jQuery plugin that automatically generates a canvas based minimap for webpage, similar to the Sublime Text's minimap functionality.

See also:

How to use it:

1. Load jQuery library and other required resources in the document.

<script src="//"></script>
<script src="//"></script>
<script src="js/html2canvas.js"></script>
<script src="js/jquery.plugin.html2canvas.js"></script>

2. Load the jQuery Infoscroller plugin's files in the document.

<link rel="stylesheet" href="css/infoscroller.css">
<script src="js/jquery.infoscroller.js"></script>

3. Wrap your Html content into a container. If you have images embed, make sure you specify the actual image sizes. Otherwise Webkit-based browsers will get a wrong height.

<div class="minimap">

4. Call the plugin to generate a minimap on the right hand side of your web page.


5. Default customization options.


width : 150,
container : '.scroller',
canvas : '.scroller__canvas',
handle : '.scroller__handle',
unselectableClass : 'g-unselectable',
loadedClass : 'scroller_loaded'


This awesome jQuery plugin is developed by unclenorton. For more Advanced Usages, please check the demo page or visit the official website.