前言

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

為什么要判斷滾動條

判斷滾動條的需求在彈窗插件中用的較多，因為彈窗大多會添加 overflow: hidden 的屬性，如果頁面比較長的話，添加這個屬性之后頁面會有晃動。

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

判斷是否有滾動條的方法

其實只需要一行 JS 就可以，測試兼容 IE7

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

但是在 IE7，IE8 中 window.innerHeight 為 underfined，所以為了兼容 IE7、IE8，需要使用document.documentElement.clientHeight 屬性計算窗口高度。

計算滾動條寬度的方法

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

計算滾動條寬度的方法比較簡單，新建一個帶有滾動條的 p 元素，通過該元素的 offsetWidth 和 clientWidth 的差值即可獲得，我在此借鑒 Magnific-popup 中的方法

總結

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

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

推薦閱讀：

怎樣使用webpack源碼loader機制

如何使用js+css實現打字效果

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com