Page Minimap — Scrollable Overview & Viewport Indicator

<main class="pm-page" id="pmPage">
  <section class="pm-sec" data-label="Intro"><h2>Introduction</h2><p>Scroll the page — the minimap on the right mirrors your position. Click or drag it to jump.</p></section>
  <section class="pm-sec" data-label="Setup"><h2>Setup</h2><p>A miniature of the page sits fixed on the right. Each block is a section, sized in proportion to its real height.</p></section>
  <section class="pm-sec pm-tall" data-label="Guide"><h2>The long guide</h2><p>This section is intentionally tall so the minimap clearly shows proportions and the viewport indicator has room to travel.</p></section>
  <section class="pm-sec" data-label="API"><h2>API</h2><p>The shaded box on the minimap is your current viewport. It moves as you scroll and you can drag it.</p></section>
  <section class="pm-sec pm-tall" data-label="Examples"><h2>Examples</h2><p>Click anywhere on the minimap to scroll there instantly; drag the indicator for fine control.</p></section>
  <section class="pm-sec" data-label="FAQ"><h2>FAQ</h2><p>The minimap rebuilds on resize so the proportions always match the real page.</p></section>
</main>
<aside class="pm-map" id="pmMap" aria-label="Page minimap">
  <div class="pm-blocks" id="pmBlocks"></div>
  <div class="pm-view" id="pmView"></div>
</aside>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;color:#e2e8f0}

.pm-page{max-width:560px;margin:0 auto;padding:24px 70px 24px 24px}
.pm-sec{background:#1e293b;border:1px solid #334155;border-radius:12px;padding:20px;margin-bottom:14px}
.pm-sec h2{font-size:19px;font-weight:800;margin-bottom:8px;color:#f1f5f9}
.pm-sec p{font-size:14px;line-height:1.6;color:#94a3b8}
.pm-tall{padding-bottom:120px}

.pm-map{position:fixed;top:50%;right:14px;transform:translateY(-50%);width:54px;background:#0b1120;border:1px solid #334155;border-radius:8px;padding:5px;cursor:pointer;user-select:none}
.pm-blocks{display:flex;flex-direction:column;gap:3px}
.pm-block{border-radius:3px;background:#334155;transition:background .15s}
.pm-block.is-active{background:#6366f1}
.pm-view{position:absolute;left:3px;right:3px;border:1.5px solid #818cf8;background:rgba(129,140,248,.18);border-radius:4px;cursor:grab;pointer-events:none}

var page = document.getElementById('pmPage');
var map = document.getElementById('pmMap');
var blocksWrap = document.getElementById('pmBlocks');
var view = document.getElementById('pmView');
var secs = Array.prototype.slice.call(page.querySelectorAll('.pm-sec'));
var scale = 1, mapInner = 0, blockEls = [];

function build() {
  blocksWrap.innerHTML = '';
  blockEls = [];
  var pageH = page.scrollHeight;
  mapInner = Math.min(220, Math.max(120, pageH * 0.16));
  scale = mapInner / pageH;
  var gapTotal = (secs.length - 1) * 3;
  secs.forEach(function (sec) {
    var b = document.createElement('div');
    b.className = 'pm-block';
    b.style.height = Math.max(6, (sec.offsetHeight / pageH) * (mapInner - gapTotal)) + 'px';
    blocksWrap.appendChild(b);
    blockEls.push(b);
  });
  blocksWrap.style.height = mapInner + 'px';
  update();
}

function update() {
  var pageH = page.scrollHeight;
  var winH = window.innerHeight;
  var top = window.scrollY * scale + 5;
  var h = Math.min(mapInner, winH * scale);
  view.style.top = top + 'px';
  view.style.height = h + 'px';
  // mark the section nearest the viewport centre
  var centre = window.scrollY + winH / 2;
  var acc = page.offsetTop, activeIdx = 0;
  secs.forEach(function (sec, i) { if (centre >= sec.offsetTop) activeIdx = i; });
  blockEls.forEach(function (b, i) { b.classList.toggle('is-active', i === activeIdx); });
}

function scrollFromMapY(clientY) {
  var rect = blocksWrap.getBoundingClientRect();
  var ratio = (clientY - rect.top) / rect.height;
  var target = ratio * page.scrollHeight - window.innerHeight / 2;
  window.scrollTo({ top: Math.max(0, target), behavior: 'smooth' });
}

map.addEventListener('click', function (e) { scrollFromMapY(e.clientY); });
map.addEventListener('pointerdown', function (e) {
  e.preventDefault();
  function mv(ev) { var rect = blocksWrap.getBoundingClientRect(); var ratio = (ev.clientY - rect.top) / rect.height; window.scrollTo({ top: Math.max(0, ratio * page.scrollHeight - window.innerHeight / 2) }); }
  function up() { document.removeEventListener('pointermove', mv); document.removeEventListener('pointerup', up); }
  document.addEventListener('pointermove', mv);
  document.addEventListener('pointerup', up);
});

window.addEventListener('scroll', update, { passive: true });
window.addEventListener('resize', build);
build();