經過 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 來精簡代碼。