JavaScript 工作區(qū)滾動距離及其兼容性

動距離

document.body.scrollTop IE、FF

document.documentElement.scrollTop chrome

兼容性寫法:

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

與 document.documentElement 屬性不同的是, document.body 屬性返回 <body> 元素, document.documentElement 屬性返回 <html> 元素。

根節(jié)點(diǎn)

有兩種特殊的文檔屬性可用來訪問根節(jié)點(diǎn)：

document.documentElement chome object HTMLHtmlElement

document.body IE、FF object HTMLBodyElement

第一個屬性可返回存在于XML以及HTML文檔中的文檔根節(jié)點(diǎn)(html標(biāo)記)。

第二個屬性是對HTML頁面的特殊擴(kuò)展,提供了對<body>標(biāo)簽的直接訪問(body標(biāo)記)。

窗口尺寸、工作區(qū)尺寸

可視區(qū)尺寸寬度

document.body.clientWidth IE、FF

document.documentElement.clientWidth chome

兼容性寫法：

document.documentElement.clientWidth || document.body.clientWidth;

可視區(qū)尺寸高度

document.body.clientHeight IE、FF

document.documentElement.clientHeight chome

兼容性寫法：

document.documentElement.clientHeight || document.body.clientHeight;

獲取瀏覽器窗口水平滾動條的位置

document.body.scrollLeft;

document.documentElement.scrollLeft

兼容性寫法：

document.documentElement.scrollLeft || document.body.scrollLeft;

獲取瀏覽器窗口垂直滾動條的位置

document.body.scrollTop IE、FF

document.documentElement.scrollTop chrome

兼容性寫法：

document.documentElement.scrollTop || document.body.scrollTop;

注意：IE、FF已經(jīng)支持documentElement對象的各種屬性, 而

以上兼容性寫法不影響所獲的屬性值

編寫自定義函數(shù)：

// 獲取瀏覽器窗口的可視區(qū)域的寬度
function getViewPortWidth() {
		return document.documentElement.clientWidth || document.body.clientWidth;
}

// 獲取瀏覽器窗口的可視區(qū)域的高度
function getViewPortHeight() {
		return document.documentElement.clientHeight || document.body.clientHeight;
}

// 獲取瀏覽器窗口水平滾動條的位置
function getScrollLeft() {
		return document.documentElement.scrollLeft || document.body.scrollLeft;
}

// 獲取瀏覽器窗口垂直滾動條的位置
function getScrollTop() {
		return document.documentElement.scrollTop || document.body.scrollTop;
}

<!DOCTYPE HTML>聲明對JavaScript獲取窗口寬度和高度的影響

了讓我們的信息能夠有效地溝通，我們需要創(chuàng)建用戶和我們的媒體之間的強(qiáng)有力的聯(lián)系。今天我們就來探討在網(wǎng)絡(luò)上呈現(xiàn)故事的新方法，并為此創(chuàng)造了一個開源和免費(fèi)使用的 JavaScript 庫稱為 space.js。該庫是 HTML 驅(qū)動的，這意味著你不需要在網(wǎng)站上寫一行 JavaScript 代碼就可以，仍然有很大的靈活性。

預(yù)覽：

http://www.slashie.org/space.js/

下載地址：

http://www.qietu.cn/thread-15154-1-1.html

----------

加微信公眾號qietuwang，獲取最新資訊

ad ~ 自學(xué)3月前端找不到工作？切圖網(wǎng) 旗下首個web前端真實項目實戰(zhàn)培訓(xùn)品牌切入口即將開班，讓你的簡歷豐富不止3倍，詳情請加前端講師qq 6133576 獲取最新開班通知，web前端學(xué)習(xí)千人群：469861419

影預(yù)告動態(tài)滾動效果圖

效果所用知識點(diǎn)：html常用標(biāo)簽, css浮動定位盒模型，javascript自定義動畫、鼠標(biāo)跟隨移動特效等。

如果有正在學(xué)習(xí)前端的伙伴，不知道怎么學(xué)習(xí)的可以加一下我的前端群589651705，每天都會分享一些企業(yè)級的知識和特效分享。

精美選項卡特效源碼：

中間布局只是UL，li就不發(fā)出來了。

需要更多的炫酷企業(yè)級練習(xí)特效，學(xué)習(xí)方法和面試技巧，敬請關(guān)注本頭條號！

在線咨詢

上一篇：html開發(fā)筆記06- 字體標(biāo)簽和文字標(biāo)簽
下一篇：HTML-表單認(rèn)識-第三章

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

JavaScript 工作區(qū)滾動距離及其兼容性

您的項目需求