/**
 * scrollBarState.js
 *
 * @Author: apple
 * @Date: 2018/3/16 01:27
 */

var scrollbarMeasure = {
    position: 'absolute',
    top: '-9999px',
    width: '50px',
    height: '50px',
    overflow: 'scroll'
};

var scrollbarWidth = void 0;

var measureScrollbar = function measureScrollbar() {
    if (typeof document === 'undefined' || typeof window === 'undefined') {
        return 0; // 如果 document 不在，则证明不在浏览器环境，直接返回，兼容 node server render。
    }
    if (scrollbarWidth) {
        return scrollbarWidth; // 滚动条在固定的环境下宽度不会改变，因此只做一次探测即可，优化性能。
    }
    var scrollDiv = document.createElement('div');
    Object.keys(scrollbarMeasure).forEach(function (scrollProp) {
        if (Object.prototype.hasOwnProperty.call(scrollbarMeasure, scrollProp)) {
            scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp];
        }
    }); // 创造一个远离人世的带滚动条的 div 用于探测，用户对于此无感知。
    document.body.appendChild(scrollDiv);
    var width = scrollDiv.offsetWidth - scrollDiv.clientWidth; // 获取滚动条的宽度，offsetWidth 和 clientWidth 的区别
    document.body.removeChild(scrollDiv); // 探测完成，销毁测试元素，减少对页面的影响。
    scrollbarWidth = width; // 缓存结果，优化性能
    return scrollbarWidth;
};

export default measureScrollbar;