JS和JQUERY獲取頁(yè)面大小,滾動(dòng)條位置,元素位置(示例代碼)
js與jquery獲得頁(yè)面大小、滾動(dòng)條位置、元素位置
//頁(yè)面位置及窗口大小
function GetPageSize() {
var scrW, scrH;
if(window.innerHeight && window.scrollMaxY)
{ // Mozilla
scrW = window.innerWidth + window.scrollMaxX;
scrH = window.innerHeight + window.scrollMaxY;
}
else if(document.body.scrollHeight > document.body.offsetHeight)
{ // all but IE Mac
scrW = document.body.scrollWidth;
scrH = document.body.scrollHeight;
} else if(document.body)
{ // IE Mac
scrW = document.body.offsetWidth;
scrH = document.body.offsetHeight;
}
var winW, winH;
if(window.innerHeight)
{ // all except IE
winW = window.innerWidth;
winH = window.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight)
{ // IE 6 Strict Mode
winW = document.documentElement.clientWidth;
winH = document.documentElement.clientHeight;
} else if (document.body) { // other
winW = document.body.clientWidth;
winH = document.body.clientHeight;
} // for small pages with total size less then the viewport
var pageW = (scrW<winW) ? winW : scrW;
var pageH = (scrH<winH) ? winH : scrH;
return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH};
};
//滾動(dòng)條位置
function GetPageScroll()
{
var x, y; if(window.pageYOffset)
{ // all except IE
y = window.pageYOffset;
x = window.pageXOffset;
} else if(document.documentElement && document.documentElement.scrollTop)
{ // IE 6 Strict
y = document.documentElement.scrollTop;
x = document.documentElement.scrollLeft;
} else if(document.body) { // all other IE
y = document.body.scrollTop;
x = document.body.scrollLeft;
}
return {X:x, Y:y};
}
jquery
獲取瀏覽器顯示區(qū)域的高度 : $(window).height();
獲取瀏覽器顯示區(qū)域的寬度 :$(window).width();
獲取頁(yè)面的文檔高度 :$(document).height();
獲取頁(yè)面的文檔寬度 :$(document).width();
獲取滾動(dòng)條到頂部的垂直高度 :$(document).scrollTop();
獲取滾動(dòng)條到左邊的垂直寬度 :$(document).scrollLeft();
計(jì)算元素位置和偏移量
offset方法是一個(gè)很有用的方法,它返回包裝集中第一個(gè)元素的偏移信息。默認(rèn)情況下是相對(duì)body的偏移信息。結(jié)果包含 top和left兩個(gè)屬性。
offset(options, results)
options.relativeTo 指定相對(duì)計(jì) 算偏移位置的祖先元素。這個(gè)元素應(yīng)該是relative或absolute定位。省略則相對(duì)body。
options.scroll 是否把 滾動(dòng)條計(jì)算在內(nèi),默認(rèn)TRUE
options.padding 是否把padding計(jì)算在內(nèi),默認(rèn)false
options.margin 是否把margin計(jì)算在內(nèi),默認(rèn)true
options.border 是否把邊框計(jì)算在內(nèi),默認(rèn)true
- JS實(shí)現(xiàn)判斷滾動(dòng)條滾到頁(yè)面底部并執(zhí)行事件的方法
- js監(jiān)聽html頁(yè)面的上下滾動(dòng)事件方法
- js,jquery滾動(dòng)/跳轉(zhuǎn)頁(yè)面到指定位置的實(shí)現(xiàn)思路
- 當(dāng)滾動(dòng)條滾動(dòng)到頁(yè)面底部自動(dòng)加載增加內(nèi)容的js代碼
- js實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到頁(yè)面底部繼續(xù)加載
- js判斷滾動(dòng)條是否已到頁(yè)面最底部或頂部實(shí)例
- js阻止移動(dòng)端頁(yè)面滾動(dòng)的兩種方法
- JS實(shí)現(xiàn)的頁(yè)面自定義滾動(dòng)條效果
- js實(shí)現(xiàn)刷新頁(yè)面后回到記錄時(shí)滾動(dòng)條的位置【兩種方案可選】
- JavaScript實(shí)現(xiàn)頁(yè)面無(wú)縫滾動(dòng)效果
相關(guān)文章
基于JQuery的一個(gè)簡(jiǎn)單的鼠標(biāo)跟隨提示效果
代碼很簡(jiǎn)單主要是用到了JQuery的三個(gè)事件mouseover,mouseout,mousemove.2010-09-09Jquery中的$.each獲取各種返回類型數(shù)據(jù)的使用方法
each()方法能使DOM循環(huán)結(jié)構(gòu)簡(jiǎn)潔,不容易出錯(cuò)。each()函數(shù)封裝了十分強(qiáng)大的遍歷功能,使用也很方便,它可以遍歷一維數(shù)組、多維數(shù)組、DOM, JSON 等等,在javaScript開發(fā)過(guò)程中使用$each可以大大的減輕我們的工作量。2015-05-05使用JQUERY進(jìn)行后臺(tái)頁(yè)面布局控制DIV實(shí)現(xiàn)左右式
一個(gè)網(wǎng)站的后臺(tái)使用frame框架來(lái)實(shí)現(xiàn)這種形式,這邊作者不是使用的frame而是純div進(jìn)行布局,下面看下具體的實(shí)現(xiàn)代碼2014-01-01jQuery動(dòng)態(tài)添加元素?zé)o法觸發(fā)綁定事件的解決方法分析
這篇文章主要介紹了jQuery動(dòng)態(tài)添加元素?zé)o法觸發(fā)綁定事件的解決方法,結(jié)合實(shí)例形式分析了動(dòng)態(tài)添加元素?zé)o法綁定事件的原因與相關(guān)解決方法,需要的朋友可以參考下2018-01-01基于jquery實(shí)現(xiàn)簡(jiǎn)單輪播圖效果
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)簡(jiǎn)單輪播圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04淺談jquery中ajax跨域提交的時(shí)候會(huì)有2次請(qǐng)求的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談jquery中ajax跨域提交的時(shí)候會(huì)有2次請(qǐng)求的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11jquery中$(#form :input)與$(#form input)的區(qū)別
本節(jié)為大家介紹下jquery 中$(#form :input)與$(#form input)的區(qū)別,需要的朋友可以參考下2014-08-08JQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示導(dǎo)航下拉列表
我們往往是將同一級(jí)目錄下的欄目先隱藏起來(lái),當(dāng)用戶的鼠標(biāo)滑過(guò)時(shí)則顯示出來(lái)。這就是用javascript實(shí)現(xiàn)的一個(gè)導(dǎo)航欄下拉列表,下面為大家講解下是如何實(shí)現(xiàn)的2013-09-09