這篇文章主要介紹JS如何判斷頁面是否有滾動(dòng)條，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

10多年專注成都網(wǎng)站制作，成都定制網(wǎng)站，個(gè)人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識(shí)、方案，網(wǎng)站設(shè)計(jì)流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù),專注于成都定制網(wǎng)站,高端網(wǎng)頁制作,對(duì)成都集裝箱等多個(gè)領(lǐng)域，擁有豐富的網(wǎng)站營銷經(jīng)驗(yàn)。

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

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

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

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

其實(shí)只需要一行 JS 就可以，測(cè)試兼容 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 屬性計(jì)算窗口高度。

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

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

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

function getScrollbarWidth() {

  var scrollDiv = document.createElement("div");
  scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
  document.body.appendChild(scrollDiv);
  var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
  document.body.removeChild(scrollDiv);

  return scrollbarWidth;

}

以上是“JS如何判斷頁面是否有滾動(dòng)條”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！