通過 JS 判斷頁面是否有滾動條的簡單方法

最近在寫外掛程式的過程中，需要使用 js 判斷是否有滾動條，搜了一下，大致方法都差不多，但都有些囉嗦，**不夠簡潔。最終通過參考不同方法，寫了乙個比較簡單的方法。在判斷滾動條的同時也需要計算滾動條的寬度，通過本篇文章一併與大家分享。

判斷滾動條的需求在彈窗外掛程式中用的較多，因為彈窗大多會新增overflow: hidden的屬性，如果頁面比較長的話，新增這個屬性之後頁面會有晃動。

為了增強使用者體驗，通過判斷是否有滾動條而新增margin-left屬性以抵消overflow: hidden之後的滾動條位置。

其實只需要一行 js 就可以，測試相容 ie7

function
hasscrollbar()

一般情況下，使用document.body.scrollheight > window.innerheight就可以判斷。

但是在 ie7，ie8 中window.innerheight為underfined，所以為了相容 ie7、ie8，需要使用document.documentelement.clientheight屬性計算視窗高度。

還是以彈窗為例，因為 ie 10 以上以及移動端瀏覽器的滾動條都是不佔據頁面寬度的透明樣式（其中 ie 10 以上瀏覽器可以通過 css 屬性還原原始的滾動條樣式），所以為了進一步增強使用者體驗，我們還需要計算滾動條的寬度，根據情況新增合理的margin-left數值。

計算滾動條寬度的方法比較簡單，新建乙個帶有滾動條的div元素，通過該元素的offsetwidth和clientwidth的差值即可獲得，我在此借鑑 magnific-popup 中的方法

function
getscrollbarwidth()

使用 js 實現乙個功能可能並不困難，但作為程式設計人員應該時刻思考如何更簡單更優雅的實現這個功能，並且時刻以提公升使用者體驗為原則。對於條件判斷，也許十行的邏輯判斷可能只需要一行，最近感受極為深刻，而且要善於使用三元表示式替代if..else來精簡**。