前端获取浏览器滚动条的宽度

最近项目中有一个需求，是鼠标上移播放器之后，页面中的内容不可以滚动(做事件的处理)，这个需求是达到了，但是引起一个bug，就是每次移入移出，页面都会抖动一下，我从网上找了下，觉得下面的这种处理的不错，所有分享一下。

css部分:

 .modal-measure-scrollbar {
    /*这个很重要，一定要加一下*/
    box-sizing: border-box;
    position: absolute;
    height: 100px;
    width: 100px;
    top: -3000px;
    left: -3000px;
    overflow: scroll;
    z-index: 1000;
    overflow-y: scroll;
}

.modal-measure-scrollbar .inner {
    box-sizing: border-box;
    height: 200px;
}

js部分:

 var a = $('<div class="modal-measure-scrollbar"></div>').prependTo($("body")),
            b = $('<div class="inner"></div>').appendTo(a),
            //c就是滚动条的宽度
            c = a.width() - b.width();
a.remove();
$("head").append('<style id="scrollbar-width"> .compensate-for-scrollbar{ margin-right:' + c + 'px } </style>');

我就可以在js中移入的时候添加compensate-for-scrollbar，移出的时候删除compensate-for-scrollbar这个class就可以达到页面不滚动的效果了。

这个是参考网上的一个大神的博客，但是他的代码单独拿出来做dome有问题，所以单独写篇博客记录一下。