前言
最近在寫插件的過程中,需要使用 JS 判斷是否有滾動條,搜了壹下,大致方法都差不多,但都有些_嗦,代碼不夠簡潔。最終通過參考不同方法,寫了壹個比較簡單的方法。在判斷滾動條的同時也需要計算滾動條的寬度,通過本篇文章壹並與大家分享。
為什麽要判斷滾動條
判斷滾動條的需求在彈窗插件中用的較多,因為彈窗大多會添加 overflow: hidden 的屬性,如果頁面比較長的話,添加這個屬性之後頁面會有晃動。
為了增強用戶體驗,通過判斷是否有滾動條而添加 margin-left 屬性以抵消 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 來精簡代碼。
原理就是判斷 是文檔高度大於可視區域高度。
相信看了本文案例妳已經掌握了方法,更多精彩請關註Gxl網其它相關文章!
推薦閱讀:
vue.js項目nginx部署步驟詳解
常用的6大JS排序算法與比較
webpack源碼中loader機制使用須知