pagemap

pagemapはWebページにドラッグでページスクロール可能なミニマップを生成するスクリプトです。非依存型
単体で動作します。

上デモ右端にあるやつです。Atomなど、テキストエディタにもよくあるミニマップをWebぺージで自動生成してくれます。

ミニマップはマウスドラッグでページ内をスクロール可能で、ぱっと見でもどんなコンテンツがあるかもある程度分かるようになっています。

<canvas id='map'></canvas>

canvasを用意します

#map {
    position: fixed;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    z-index: 100;
}

生成されるマップを固定します

<script src="pagemap.js"></script>
<script>
pagemap(document.querySelector('#map'));
</script>

スクリプトを読み込んで生成先に先ほど用意したcanvasを指定します。

下記のように要素を指定して設定する事も出来るみたいです。

pagemap(document.querySelector('#map'), {
    viewport: null,
    styles: {
        'header,footer,section,article': rgba(0,0,0,0.08),
        'h1,a': rgba(0,0,0,0.10),
        'h2,h3,h4': rgba(0,0,0,0.08)
    },
    back: rgba(0,0,0,0.02),
    view: rgba(0,0,0,0.05),
    drag: rgba(0,0,0,0.10),
    interval: null
});

動作テストしたんですが、ちょっとうまく動かなかったので後で再度検証します。ライセンスはMIT。

pagemapOn Github