JS抓取頁面捲軸
這次帶給大家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 > (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中文網其它相關文章!
推薦閱讀:
以上是JS抓取頁面捲軸的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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

是否要複製MicrosoftWord中的頁面,並保持格式不變?這是一個聰明的想法,因為當您想要建立特定文件佈局或格式的多個副本時,在Word中複製頁面可能是一種有用的節省時間的技術。本指南將逐步引導您在Word中複製頁面的過程,無論是建立範本還是複製文件中的特定頁面。這些簡單的說明旨在幫助您輕鬆地重新製作頁面,省去從頭開始的麻煩。為什麼要在MicrosoftWord中複製頁面?在Word中複製頁面非常有益的原因有以下幾點:當您有一個具有特定佈局或格式的文件要複製時。與從頭開始重新建立整個頁面不同

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

頁面刷新在我們日常的網路使用中非常常見,當我們訪問一個網頁後,有時會遇到一些問題,例如網頁加載不出來或顯示不正常等。這時候我們通常會選擇刷新頁面來解決問題,那麼要如何快速刷新頁面呢?下面我們就來探討頁面刷新的快捷鍵。頁面刷新快捷鍵是一種透過鍵盤操作來快速刷新目前網頁的方法。在不同的作業系統和瀏覽器中,頁面刷新的快捷鍵可能有所不同。下面我們以常見的W

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

如何監聽一個iframe的滾動,需要具體程式碼範例當我們在網頁中使用iframe標籤嵌入其他網頁時,有時需要對iframe中的內容進行一些特定的操作。其中一個常見的需求是監聽iframe的捲動事件,以便在捲動發生時執行對應的程式碼。以下將介紹如何使用JavaScript來監聽一個iframe的捲動,並提供具體的程式碼範例供參考。在取得iframe元素首先,我們需要

《處理Laravel頁面無法正確顯示CSS的方法,需要具體程式碼範例》在使用Laravel框架開發Web應用程式時,有時候會遇到頁面無法正確顯示CSS樣式的問題,這可能會導致頁面呈現不正常的樣式,影響使用者體驗。本文將介紹一些處理Laravel頁面無法正確顯示CSS的方法,並提供具體的程式碼範例,幫助開發者解決這個常見問題。一、檢查檔案路徑首先要檢查CSS檔案的路徑是
