滚动条跳动问题

通过js 控制页面的 overflow: hidden 与 overflow: auto 切换的时候，由于页面总宽度变化导致文档跳动。

解决方案一： （纯CSS）

在页面主体元素上加上

margin-left: calc(100vw - 100%) !important;

这个方法需要一个定宽的主体元素，例如总的 wrap。
如果不是定宽而是自适应的，就会在左边出现与滚动条同宽的空白列。

其次： calc是CSS3中的计算，IE10+浏览器支持

解决方案二： （JS控制）

通过设置 body 的scroll：hidden 与 padding-left 达到类似的效果

在打开 模态框的时候， 设置

body.paddingRight: window.innerWidth - document.documentElement.clientWidth,
body.overflowY: 'hidden'

关闭模态框的时候，设置

body.paddingRight: 0,
body.overflowY: auto

即可。

innerWidth有兼容性问题, IE8无法正常使用.

解决兼容性的方法:

function getScrollBarWidth () {
	var oP = document.createElement('p'),
               styles = {
                   width: '100px',
                   height: '100px'
               }, i, clientWidth1, clientWidth2, scrollbarWidth;
           for (i in styles) oP.style[i] = styles[i];
           document.body.appendChild(oP);
           clientWidth1 = oP.clientWidth;
           oP.style.overflowY = 'scroll';
           clientWidth2 = oP.clientWidth;
           scrollbarWidth = clientWidth1 - clientWidth2;
		oP.parent.removeChild(oP);
           return scrollbarWidth;

}