为网页实现mini-map效果

minimap效果的实现

在项目中，需要制作出缩略图的效果。效果如下：

minimap效果.gif

在firefox可以使用 element属性实现该效果。（其它浏览器暂不支持）。这里使用iframe来达到更好的兼容性。

效果分析

minimap主要是对主体内容进行映射。主体html如下：

<body>
    <div class="content">
        <p>
            文章内容
        </p>
        <img src="..">
    </div>
</body>

我们需要将需要的html内容，嵌入到iframe中。

# 这里获取整个document下的html
let html = document.documentElement.outerHTML
# 将html内容写入到目标iframe中
targetIframe.wirte(html)

整体逻辑是这样。接着实现点击、滚动、拖拽等事件。如果有大量交互行为的页面，需要对minimap做更多的优化。

显示效果的实现

codepen地址

考虑页面加载的延迟效果，我们将minimap的js文件放在body的最后进行引用（当然，建议动态页面考虑其他的方式进行实现）。

minimap所处的div结构应该如下：

<div class="slider">
    <iframe class="slider__content">
    </div>
    <div class="slider__size">
    </div>
    <div class="slider__controller">
    </div>
</div>

iframe的作用就是映射主体的内容的html。后面的 slider__size slider__controller有什么用？

我们对比一下有无后两个div的差别：

效果对比示意

前一个效果没有选择框，无法进行滚动和拖拽。

实际上，slider__size控制显示区域的大小，slider__controller显示目前显示的区域范围。

计算显示区域

minimap的显示区域应该达到以下效果

iframe中内容的纵横比应该和目标区域的纵横比相同
iframe中内容应该进行等比例缩放

那么，我们假设目标内容的宽为 $X$ px，高为 $Y$ px，iframe的高为 $x$ px，高度为 $y$ px。缩放比例为 $scale$ 那么就有：

$x / y = X / Y$

$scale = x / X$

js的实现如下

let bodyWidth = body.clientWidth,
    # 整体内容的长宽比
    bodyRatio = docEl.clientHeight / docEl.clientWidth,
    # window的长宽比
    winRatio = win.innerHeight / win.innerWidth;

# 设置整个slider区域占父级区域的宽度
slider.style.width = '10%';
# 获取scale的值
realScale = slider.clientWidth / bodyWidth;
# 进行等比例缩放
sliderContent.style.transform = `scale(${realScale})`; 
# 为content设置一个宽高。
sliderContent.style.width = (100 / realScale) + '%';
sliderContent.style.height = (100 / realScale) + '%';

这里有一个问题：

为什么 sliderContent的值这样设置？

slider__size是如何控制显示区域的大小

首先，我们知道padding区域是一个透明的区域。我们可以通过控制padding区域的大小进而就能控制需要显示的区域。

将slider__size叠加到 slider__content上。

这里只需要将 slider__content定位属性设置为absolute
设置 slider__size的 padding的宽高

sliderSize.style.paddingTop = (bodyRatio * 100)  + '%';

slider__controller做一个定位框

这里应用 padding属性和 boder属性，以及 translate属性。

padding属性保证定位框透明
boder属性设置边框
translate属性控制定位框的移动

定位框的大小比例需要和window的长宽比例保持一致：

controller.style.paddingTop = (winRatio * 100) + '%';

当页面移动时，我们通过设置translate属性值来定位到minimap上的位置。

 controller.style.transform = `translate(${win.pageXOffset * realScale}px, ${win.pageYOffset * realScale}px)`;

为minimap增加事件效果

我们需要为minimap增加以下效果：

点击minimap，主体内容自动移动到指定位置
页面滚动，minimap也随之滚动
拖拽定位框，页面也随之进行移动

一般的js程序员，基本会采用以下事件组合

鼠标按下（mousedown）触发移动（scrollTo）
鼠标移动（mouseMove）触发滚动（scrollBy）
鼠标松开（mouseup）停止触发滚动（scrollBy）
鼠标不在minimap区域，停止触发移动（scrollTo）

let mouseX = 0,
    mouseY = 0,
    mouseDown = false;

function pointerDown(e) {
    e.preventDefault();
    mouseDown = true;
    mouseX = e.clientX;
    mouseY = e.clientY;
    let offsetX = ((mouseX - slider.offsetLeft) - (controller.clientWidth/2)) / realScale;
    let offsetY = ((mouseY - slider.offsetTop) - (controller.clientHeight / 2)) / realScale;
    win.scrollTo(offsetX, offsetY);
}

slider.addEventListener('mousedown', pointerDown);

function pointerMove(e) {
    if (mouseDown) {
        x = e.clientX;
        y = e.clientY;
        win.scrollBy((x - mouseX) / realScale, ((y - mouseY) / realScale));
        mouseX = x;
        mouseY = y;
    }
}

win.addEventListener('mousemove', pointerMove);

function pointerReset(e) {
    mouseDown = false;
}
win.addEventListener('mouseup', pointerReset);

function pointerLeave(e) {
    if ( e.target === body) {
        mouseDown = false;
    }
}

当然，制作复杂页面的minimap的时候，会涉及到更加复杂的逻辑交互。可以采用reactJS来进行事件的管理，这里不赘述。有需要的同学可以留言，后期会考虑出一系列reactJS实际应用的例子。

扩展阅读

使用element实现minimap效果

mouse事件

mini-map实现源码