JS如何判斷滾動條是否滾到底部

判斷滾動條到底部,需要用到DOM的三個屬性值揣非,即scrollTop她渴、clientHeight达址、scrollHeight。


scrollTop為滾動條在Y軸上的滾動距離趁耗。


clientHeight為內(nèi)容可視區(qū)域的高度沉唠。


scrollHeight為內(nèi)容可視區(qū)域的高度加上溢出(滾動)的距離。


從這個三個屬性的介紹就可以看出來苛败,滾動條到底部的條件即為scrollTop + clientHeight == scrollHeight满葛。


代碼如下(兼容不同的瀏覽器)。


//滾動條在Y軸上的滾動距離


function getScrollTop(){

  var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;

  if(document.body){

    bodyScrollTop = document.body.scrollTop;

  }

  if(document.documentElement){

    documentScrollTop = document.documentElement.scrollTop;

  }

  scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;

  return scrollTop;

}


//文檔的總高度


function getScrollHeight(){

  var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;

  if(document.body){

    bodyScrollHeight = document.body.scrollHeight;

  }

  if(document.documentElement){

    documentScrollHeight = document.documentElement.scrollHeight;

  }

  scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;

  return scrollHeight;

}


//瀏覽器視口的高度


function getWindowHeight(){

  var windowHeight = 0;

  if(document.compatMode == “CSS1Compat”){

    windowHeight = document.documentElement.clientHeight;

  }else{

    windowHeight = document.body.clientHeight;

  }

  return windowHeight;

}


window.onscroll = function(){

  if(getScrollTop() + getWindowHeight() == getScrollHeight()){

    alert(“已經(jīng)到最底部了罢屈!!”);

  }

};

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末嘀韧,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子缠捌,更是在濱河造成了極大的恐慌锄贷,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,430評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異谊却,居然都是意外死亡柔昼,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,406評論 3 398
  • 文/潘曉璐 我一進店門因惭,熙熙樓的掌柜王于貴愁眉苦臉地迎上來岳锁,“玉大人,你說我怎么就攤上這事蹦魔〖ぢ剩” “怎么了?”我有些...
    開封第一講書人閱讀 167,834評論 0 360
  • 文/不壞的土叔 我叫張陵勿决,是天一觀的道長乒躺。 經(jīng)常有香客問我,道長低缩,這世上最難降的妖魔是什么嘉冒? 我笑而不...
    開封第一講書人閱讀 59,543評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮咆繁,結(jié)果婚禮上讳推,老公的妹妹穿的比我還像新娘。我一直安慰自己玩般,他們只是感情好银觅,可當(dāng)我...
    茶點故事閱讀 68,547評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著坏为,像睡著了一般究驴。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上匀伏,一...
    開封第一講書人閱讀 52,196評論 1 308
  • 那天洒忧,我揣著相機與錄音,去河邊找鬼够颠。 笑死熙侍,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的摧找。 我是一名探鬼主播核行,決...
    沈念sama閱讀 40,776評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼蹬耘!你這毒婦竟也來了芝雪?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,671評論 0 276
  • 序言:老撾萬榮一對情侶失蹤综苔,失蹤者是張志新(化名)和其女友劉穎惩系,沒想到半個月后位岔,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,221評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡堡牡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,303評論 3 340
  • 正文 我和宋清朗相戀三年抒抬,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片晤柄。...
    茶點故事閱讀 40,444評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡擦剑,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出芥颈,到底是詐尸還是另有隱情惠勒,我是刑警寧澤,帶...
    沈念sama閱讀 36,134評論 5 350
  • 正文 年R本政府宣布爬坑,位于F島的核電站纠屋,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏盾计。R本人自食惡果不足惜售担,卻給世界環(huán)境...
    茶點故事閱讀 41,810評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望署辉。 院中可真熱鬧族铆,春花似錦、人聲如沸哭尝。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,285評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽刚夺。三九已至,卻和暖如春末捣,著一層夾襖步出監(jiān)牢的瞬間侠姑,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,399評論 1 272
  • 我被黑心中介騙來泰國打工箩做, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留莽红,地道東北人。 一個月前我還...
    沈念sama閱讀 48,837評論 3 376
  • 正文 我出身青樓邦邦,卻偏偏與公主長得像安吁,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子燃辖,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,455評論 2 359

推薦閱讀更多精彩內(nèi)容