JS有哪些屬性可以判斷頁面是否存在捲軸
- php中世界最好的语言原創
- 2018-05-02 10:46:012211瀏覽
這次帶給大家JS有哪些屬性可以判斷頁面是否存在滾動條，JS判斷頁面是否存在滾動條的注意事項有哪些，下面就是實戰案例，一起來看一下。
前言
最近在寫入插件的過程中，需要使用JS 判斷是否有滾動條，搜了一下，大致方法都差不多，但都有些囉嗦，程式碼不夠簡潔。最後透過參考不同方法，寫了一個比較簡單的方法。在判斷滾動條的同時也需要計算滾動條的寬度，透過本篇文章一併與大家分享。
為什麼要判斷滾動條
判斷捲軸的需求在彈窗外掛程式中用的較多，因為彈窗大多會加上 <a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a>: hidden 的屬性，如果頁面比較長的話，加入這個屬性之後頁面會有晃動。
為了增強用戶體驗，透過判斷是否有滾動條而添加<a href="http://www.php.cn/wiki/937.html" target="_blank">margin-left</a> 屬性以抵消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，所以為了相容於IE7、IE8，需要使用document.documentElement.clientHeight #屬性計算視窗高度。
計算捲軸寬度的方法
還是以彈跳視窗為例，因為IE 10 以上以及行動裝置的捲軸都是不佔據頁面寬度的透明樣式（其中IE 10 以上瀏覽器可以透過CSS 屬性還原原始的捲軸樣式），所以為了進一步增強使用者體驗，我們還需要計算滾動條的寬度，根據情況添加合理的margin-left 數值。
計算捲軸寬度的方法比較簡單，新建一個有捲軸的p 元素，透過該元素的offsetWidth 和 clientWidth 的差值即可取得，我在此借鏡Magnific-popup 中的方法
function getScrollbarWidth() {
var scrollp = document.createElement("p");
scrollp.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
document.body.appendChild(scrollp);
var scrollbarWidth = scrollp.offsetWidth - scrollp.clientWidth;
document.body.removeChild(scrollp);
return scrollbarWidth;
}
總結
使用JS 實作一個功能可能並不困難，但身為程式設計師應該時時思考如何更簡單更優雅的實現這個功能，並且時時刻刻以提升使用者體驗為原則。對於條件判斷，也許十行的邏輯判斷可能只需要一行，最近感受極為深刻，而且要善於使用三元表達式取代if..else 來精簡程式碼。
原理就是判斷 是文檔高度大於視覺區域高度。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是JS有哪些屬性可以判斷頁面是否存在捲軸的詳細內容。更多資訊請關注PHP中文網其他相關文章！