如何通過(guò)JS判斷頁(yè)面是否有滾動(dòng)條

前言

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

為什么要判斷滾動(dòng)條

判斷滾動(dòng)條的需求在彈窗插件中用的較多，因?yàn)閺棿按蠖鄷?huì)添加 overflow: hidden 的屬性，如果頁(yè)面比較長(zhǎng)的話，添加這個(gè)屬性之后頁(yè)面會(huì)有晃動(dòng)。

為了增強(qiáng)用戶體驗(yàn)，通過(guò)判斷是否有滾動(dòng)條而添加 margin-left 屬性以抵消 overflow: hidden 之后的滾動(dòng)條位置。

判斷是否有滾動(dòng)條的方法

其實(shí)只需要一行 JS 就可以，測(cè)試兼容 IE7

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

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

計(jì)算滾動(dòng)條寬度的方法

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

計(jì)算滾動(dòng)條寬度的方法比較簡(jiǎn)單，新建一個(gè)帶有滾動(dòng)條的 p 元素，通過(guò)該元素的 offsetWidth 和 clientWidth 的差值即可獲得，我在此借鑒 Magnific-popup 中的方法

總結(jié)

使用 JS 實(shí)現(xiàn)一個(gè)功能可能并不困難，但作為編程人員應(yīng)該時(shí)刻思考如何更簡(jiǎn)單更優(yōu)雅的實(shí)現(xiàn)這個(gè)功能，并且時(shí)刻以提升用戶體驗(yàn)為原則。對(duì)于條件判斷，也許十行的邏輯判斷可能只需要一行，最近感受極為深刻，而且要善于使用三元表達(dá)式替代 if..else 來(lái)精簡(jiǎn)代碼。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

怎樣使用webpack源碼loader機(jī)制

如何使用js+css實(shí)現(xiàn)打字效果

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com