经过 JS 判断页面是否有滚动条的简单方法

前言

最近在写插件的过程当中，须要使用 JS 判断是否有滚动条，搜了一下，大体方法都差很少，但都有些啰嗦，代码不够简洁。最终经过参考不一样方法，写了一个比较简单的方法。在判断滚动条的同时也须要计算滚动条的宽度，经过本篇文章一并与你们分享。

为何要判断滚动条

判断滚动条的需求在弹窗插件中用的较多，由于弹窗大多会添加 overflow: hidden 的属性，若是页面比较长的话，添加这个属性以后页面会有晃动。

为了加强用户体验，经过判断是否有滚动条而添加 margin-left 属性以抵消 overflow: hidden 以后的滚动条位置。

判断是否有滚动条的方法

其实只须要一行 JS 就能够，测试兼容 IE7

function hasScrollbar() {
    return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
}

通常状况下，使用 document.body.scrollHeight > window.innerHeight 就能够判断。

可是在 IE7，IE8 中 window.innerHeight 为 underfined，因此为了兼容 IE七、IE8，须要使用 document.documentElement.clientHeight 属性计算窗口高度。

计算滚动条宽度的方法

仍是以弹窗为例，由于 IE 10 以上以及移动端浏览器的滚动条都是不占据页面宽度的透明样式（其中 IE 10 以上浏览器能够经过 CSS 属性还原原始的滚动条样式），因此为了进一步加强用户体验，咱们还须要计算滚动条的宽度，根据状况添加合理的 margin-left 数值。

计算滚动条宽度的方法比较简单，新建一个带有滚动条的 div 元素，经过该元素的 offsetWidth 和 clientWidth 的差值便可得到，我在此借鉴 Magnific-popup 中的方法

function getScrollbarWidth() {

    var scrollDiv = document.createElement("div");
    scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
    document.body.appendChild(scrollDiv);
    var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
    document.body.removeChild(scrollDiv);

    return scrollbarWidth;

}

总结

使用 JS 实现一个功能可能并不困难，但做为编程人员应该时刻思考如何更简单更优雅的实现这个功能，而且时刻以提高用户体验为原则。对于条件判断，也许十行的逻辑判断可能只须要一行，最近感觉极为深入，并且要善于使用三元表达式替代 if..else 来精简代码。