minimap效果的实现
在项目中，需要制作出缩略图的效果。效果如下：
minimap效果.gif
在firefox可以使用 element属性实现该效果。（其它浏览器暂不支持）。这里使用iframe来达到更好的兼容性。
效果分析
minimap主要是对主体内容进行映射。主体html如下：
文章内容
我们需要将需要的html内容，嵌入到iframe中。
# 这里获取整个document下的html
let html = document.documentElement.outerHTML
# 将html内容写入到目标iframe中
targetIframe.wirte(html)
整体逻辑是这样。接着实现点击、滚动、拖拽等事件。如果有大量交互行为的页面，需要对minimap做更多的优化。
显示效果的实现
codepen地址
考虑页面加载的延迟效果，我们将minimap的js文件放在body的最后进行引用（当然，建议动态页面考虑其他的方式进行实现）。
minimap所处的div结构应该如下：