有一个需求，画布是使用g6做的。
画布缩放是画布内部transform: matrix实现的。
甲方非要给画布外面加个滚动条，但是就算加了滚动条，滚动条和画布的缩放产生关联。
方案一：给画布初始增加宽高，外面的容器使用overflow:auto实现滚动条效果
结论：不合适，因为这样的话，对于编辑页，内容物不好在首次进入时就在视口展示，反而需要手动调整居中，更不好用了
方案二：给画布加一个容器包裹，容器和画布等高等宽，然后给这个容器加一个隐藏的子元素，画布缩放和移动时通过画布事件同步至子元素，滚动条的移动也同步至画布。
这个方案初步可行，实现了一版，中间开发有几个小问题，记录一下：
1、画布的移动和缩放会改变滚动条，滚动条也会改变画布，如果不加以限制，就会死循环。因此为了区分是那部分触发的，给滚动条和画布添加mouseover，标记flag
2、这招商按住空格会滚动到底部，这个是因为滚动原生事件。起初preventDefault不生效，后来才知道非交互型元素需要设置tabindex才行。
方案二改进
不再给画布包裹了，而是直接在右侧和下方做两个滚动条。右侧和画布等高，左侧和画布等宽。粗细调成1px,滚动条里面包含一个子元素，子元素缩放保持和画布一致，使用transform和scrollLeft/scrollTop跟随画布缩放和移动.
正好画布有缩略图，直接使用mutationBoserver来监听缩略图dom变化
问题记录： transform不会让浏览器重排，导致首屏没有加载滚动条时，后面缩放画布也没展示滚动条。后面把transform改成height/width: calc(100% * scale)来实现
