JavaScript判斷元素底部到達瀏覽器客戶區的低端
分享一段程式碼例項,它能夠實現判斷元素的底部是否到達瀏覽器客戶區的底部。
這也是看到有朋友在提問,收集了相關的答案進行分享一下。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { margin:0px; padding:0px; } #antzone { width:50px; height:2000px; background:green; margin:50px auto; } </style> <script type="text/javascript"> window.onload = function () { var odiv = document.getElementById("antzone"); var H = odiv.offsetHeight + odiv.offsetTop; var scrollH = H-document.documentElement.clientHeight; window.onscroll = function () { if (document.documentElement.scrollTop + document.body.scrollTop >= scrollH) { alert("元素的的邊緣已經到達客戶區底邊緣"); } } } </script> </head> <body> <div id="antzone"></div> <div id="show"></div> </body> </html>
上面的程式碼實現了我們的要求,下面詳細介紹一下它的實現過程。
一.程式碼註釋:
(1).window.onload = function () {},當文件內容完全載入完畢再去執行函式中的程式碼。
(2).var odiv = document.getElementById("antzone"),獲取id屬性值為antzone的元素物件。
(3).var H = odiv.offsetHeight + odiv.offsetTop,獲取元素的高度和元素距離根元素的距離和。
(4).var scrollH = H-document.documentElement.clientHeight,獲取預設元素底部被遮擋的尺寸,如果頁面上滾這個尺寸,那麼元素的低邊緣就位於瀏覽器客戶區的低端。
(5).window.onscroll = function () {},註冊onscroll事件處理函式。
(6).document.documentElement.scrollTop + document.body.scrollTop >= scrollH,判斷向上滾動的尺寸是否大於等於scrollH。
二.相關閱讀:
(1).offsetHeight參閱js offsetHeight一章節。
(2).offsetTop參閱js offsetTop一章節。
(3).clientHeight參閱clientHeight一章節。
(4).onscroll參閱javascript scroll事件一章節。
相關文章
- JavaScript判斷元素是否在瀏覽器可視區域JavaScript瀏覽器
- 判斷客戶瀏覽器是否支援cookie (轉)瀏覽器Cookie
- javascript如何區分判斷firefox火狐瀏覽器JavaScriptFirefox瀏覽器
- 如何判斷滾動條到達最低端
- javascript判斷當前瀏覽器是不是微信瀏覽器JavaScript瀏覽器
- JavaScript判斷系統和瀏覽器JavaScript瀏覽器
- JavaScript 判斷瀏覽器的型別和版本JavaScript瀏覽器型別
- javascript如何判斷內建的微信瀏覽器JavaScript瀏覽器
- javascript獲取滑鼠在瀏覽器客戶區座標JavaScript瀏覽器
- 判斷客戶端是iOS還是Android,判斷是不是在微信瀏覽器開啟客戶端iOSAndroid瀏覽器
- .net火狐瀏覽器 ie瀏覽器 判斷瀏覽器
- 瀏覽器客戶區是哪塊區域瀏覽器
- javascript判斷uc瀏覽器程式碼例項JavaScript瀏覽器
- IE瀏覽器版本的判斷瀏覽器
- JavaScript 判斷IE瀏覽器的版本包括IE11JavaScript瀏覽器IE11
- javascript如何判斷當前瀏覽器是否支援cookieJavaScript瀏覽器Cookie
- 使用javascript判斷瀏覽器核心程式碼例項JavaScript瀏覽器
- 判斷當前瀏覽器是不是微信瀏覽器瀏覽器
- 如何判斷IE瀏覽器的版本瀏覽器
- javascript基礎(BOM常用物件:navigtor,判斷瀏覽器的常用方法,和區分IE瀏覽器的方法)(三十九)JavaScript物件瀏覽器
- js程式碼判斷瀏覽器JS瀏覽器
- jQuery判斷瀏覽器型別jQuery瀏覽器型別
- PHP判斷瀏覽器型別:PHP瀏覽器型別
- JavaScript判斷當前裝置和瀏覽器型別JavaScript瀏覽器型別
- PHP判斷訪客是否移動端瀏覽器訪問PHP瀏覽器
- javascript判斷瀏覽器的型別和版本程式碼例項JavaScript瀏覽器型別
- 判斷瀏覽器型別和版本的javascript程式碼例項瀏覽器型別JavaScript
- jquery判斷滾動是否到達底部程式碼例項jQuery
- js 判斷是什麼瀏覽器、是否為谷歌瀏覽器JS瀏覽器谷歌
- js如何判斷當前瀏覽器是否是谷歌瀏覽器JS瀏覽器谷歌
- JS判斷PC瀏覽器型別JS瀏覽器型別
- 判斷是否在微信瀏覽器中瀏覽器
- 如何判斷是否是360瀏覽器瀏覽器
- php判斷是否是微信瀏覽器PHP瀏覽器
- 條件註釋判斷瀏覽器瀏覽器
- 條件註釋判斷瀏覽器版本瀏覽器
- 判斷IE瀏覽器程式碼例項瀏覽器
- js如何判斷是否是IE瀏覽器JS瀏覽器