這次帶給大家怎樣使用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; }
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是如何使用JS判斷目前頁面是否有捲軸的詳細內容。更多資訊請關注PHP中文網其他相關文章!