首頁 web前端 js教程 JS抓取頁面捲軸

JS抓取頁面捲軸

Apr 20, 2018 am 09:24 AM
javascript 捲動 頁面

這次帶給大家JS抓取頁面捲軸,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 &gt; (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中文網其它相關文章!

推薦閱讀:

jQuery三種$()使用詳解

怎麼選擇使用jQuery版本

H5設計時的小技巧總結

以上是JS抓取頁面捲軸的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何在Word複製頁面 如何在Word複製頁面 Feb 20, 2024 am 10:09 AM

如何在Word複製頁面

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術

如何使用WebSocket和JavaScript實現線上預約系統 如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統

處理Laravel頁面無法正確顯示CSS的方法 處理Laravel頁面無法正確顯示CSS的方法 Mar 10, 2024 am 11:33 AM

處理Laravel頁面無法正確顯示CSS的方法

3秒跳轉頁面實作方法:PHP程式指南 3秒跳轉頁面實作方法:PHP程式指南 Mar 25, 2024 am 10:42 AM

3秒跳轉頁面實作方法:PHP程式指南

如何快速刷新網頁? 如何快速刷新網頁? Feb 18, 2024 pm 01:14 PM

如何快速刷新網頁?

監控iframe的滾動行為 監控iframe的滾動行為 Feb 18, 2024 pm 08:40 PM

監控iframe的滾動行為

See all articles