js-minimap
Generate a minimap for your web page(or a module), and observe the view to update automatic.
自动生成页面（或局部模块）的缩略图，并可观察视图变化以自动更新缩略图。
Installation
NPM
import Minimap from 'js-minimap'Browser
<script src="js-minimap/dist/minimap.umd.js" />Usage
<div class="container">
<!-- your content -->
</div>
<div class="minimap"></div>
<script>
const container = document.querySelector('.container') // any container you want to generate a minimap for
const target = document.querySelector('.minimap') // the container of the minimap
const minimap = new Minimap({
container,
target,
width: 200,
observe: true, // default true
throttle: 30, // default 30
})
</script>Options
| Option | Description | Type | Default |
|---|---|---|---|
| container | any container you want to generate a minimap for | HTMLElement | — |
| target | somewhere you want to place the minimap. | HTMLElement | — |
| width | minimap's width | number | 200 |
| height | minimap's height, if width is available, height will be ignored |
number | - |
| observe | whether observe the view container to update the minimap, based on MutationObserver | boolean | true |
| throttle | throttle time | number | 30 |
Methods
reset
if you want to reset the minimap manually, you can call reset method.
const minimap = new Minimap({
container,
target,
observe: false,
})
// when you want to reset the minimap, for example, the container's content changed
minimap.reset()