首頁 > web前端 > js教程 > 主體

透過 JS 判斷頁面是否有捲軸的實作方法

亚连
發布: 2018-05-26 14:53:19
原創
1421 人瀏覽過

最近在寫插件的過程中,需要使用 JS 判斷是否有捲軸,搜了一下,大致方法都差不多,但都有些囉嗦,程式碼不夠簡潔。最後透過參考不同方法,寫了一個比較簡單的方法

前言

#最近在寫插件的過程中,需要使用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;

}
登入後複製

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

基於h5的history改善ajax列表請求體驗

簡單談談AJAX核心物件

ajax資料傳輸方式實例詳解

#

以上是透過 JS 判斷頁面是否有捲軸的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板