javascript之scroll事件(一)

scroll

翻譯過來就是滾動。在js中稱為滾動事件,當用戶滾動到指定位置或元素時會觸發(fā)scroll事件。

scroll事件適用于所有可滾動的元素和window對象(瀏覽器 窗口),scroll()方法出阿發(fā)scroll事件,或規(guī)定scroll事件時,運行的函數(shù)。

$(document).height();//整個網(wǎng)頁的高度

$(window).height();//瀏覽器可視窗口的高度

$(window).scrollTop();//瀏覽器可視窗口頂端距離網(wǎng)頁頂端的高度(垂直偏移)

jquery對應(yīng)算得的高度

$(window).height();//瀏覽器當前可視窗口的高度

$(document).height();//瀏覽器當前窗口文檔的高度

$(document.body).height();//瀏覽器當前窗口文檔body的高度

$(document.body).outerHeight(true);//瀏覽器當前文檔body的高度,包括border,padding,margin

$(window).width();//瀏覽器當前窗口可視區(qū)域的寬度

$(document).width();//瀏覽器當前窗口文檔對象的寬度。

$(document.body).width();//瀏覽器當前窗口文檔body的寬度

$(document.body).outerWidth(true);//瀏覽器當前窗口文檔body的總寬度,包括border,padding,margin

javascript的各種寬度

網(wǎng)頁可見區(qū)域?qū)抂僅針對body]: document.body.clientWidth

網(wǎng)頁可見區(qū)域高[僅針對body]: document.body.clientHeight

網(wǎng)頁可見區(qū)域?qū)抂僅針對body]: document.body.offsetWidth (包括滾動條和邊框,若滾動條和邊框為0,則和clientWidth相等)

網(wǎng)頁可見區(qū)域高[僅針對body]: document.body.offsetHeight (包括滾動條和邊框,若滾動條和邊框為0,則和clientHeight相等)

可視窗口寬度(包括滾動軸寬度):window.innerWidth; //IE9+、Chrome、Firefox、Opera 以及 Safari

可視窗口高度,不包括瀏覽器頂部工具欄: window.innerHeight;//IE9+、Chrome、Firefox、Opera 以及 Safari

網(wǎng)頁正文全文寬(不包括滾動軸的寬度): document.body.scrollWidth

網(wǎng)頁正文全文高:document.body.scrollHeight

//假如網(wǎng)頁中沒有滾動軸,document.body.scrollWidth和window.innerWidth相等,document.body.scrollHeight和window.innerHeight相等。

網(wǎng)頁被卷去的高: document.body.scrollTop

網(wǎng)頁被卷去的左: document.body.scrollLeft

網(wǎng)頁正文部分上: window.screenTop

網(wǎng)頁正文部分左: window.screenLeft

屏幕分辨率的高(整個屏幕的高度): window.screen.height

屏幕分辨率的寬(整個屏幕的寬度): window.screen.width

屏幕可用工作區(qū)高度: window.screen.availHeight

屏幕可用工作區(qū)寬度: window.screen.availWidth

整個瀏覽器可用工作區(qū)高度: window.outerHeight

整個瀏覽器可用工作區(qū)寬度: window.outerWidth


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 14,160評論 1 92
  • Window和document對象的區(qū)別 window對象window對象表示瀏覽器中打開的窗口window對象是...
    FConfidence閱讀 2,366評論 0 5
  • 網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.clientWidth網(wǎng)頁可見區(qū)域高:document.body.cl...
    LuckyS007閱讀 703評論 0 0
  • 一、JS前言 (1)認識JS 也許你已經(jīng)了解HTML標記(也稱為結(jié)構(gòu)),知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,932評論 0 8
  • 前不久,我們公司的老板,在旁邊又租了一個辦公室,差不多兩百平方。 用玻璃隔了幾個區(qū)域,每個空間不算大的。 然后,老...
    丹羽如月閱讀 649評論 0 0

友情鏈接更多精彩內(nèi)容