當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

document.body.scrollTop的值为零问题

發(fā)布時(shí)間：2023/12/31 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 document.body.scrollTop的值为零问题小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

document.body.scrollTop的值為零問(wèn)題

問(wèn)題背景：在做監(jiān)聽(tīng)滾動(dòng)到底部事件時(shí)，發(fā)現(xiàn)document.body.scrollTop的值一直為零

網(wǎng)上查資料發(fā)現(xiàn)是各個(gè)瀏覽器下對(duì)是否有聲明的scrollTop有差異

IE：

對(duì)于沒(méi)有聲明的頁(yè)面，使用 document.body.scrollTop 或 document.documentElement.scrollTop；

對(duì)于有聲明的頁(yè)面，則使用 document.documentElement.scrollTop；

Chrome、Firefox：

對(duì)于沒(méi)有聲明的頁(yè)面，使用 document.body.scrollTop 來(lái)獲取 scrollTop ；

對(duì)于有聲明的頁(yè)面，則使用 document.documentElement.scrollTop；

Safari:

safari 比較特別，有自己獲取scrollTop的函數(shù) ： window.pageYOffset ；

可以使用下面代碼在各個(gè)瀏覽器進(jìn)行打印測(cè)試

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>scrollTop</title><style>body{margin: 0;padding: 0;height: 1000px;}</style> </head> <body><div>test scrollTop</div><script>window.onscroll = function () {var sTop = document.body.scrollTop;console.log(sTop);};</script> </body> </html>

已經(jīng)定位問(wèn)題，如何解決呢？

為了兼容所有瀏覽器，封裝一個(gè)函數(shù)，去獲取頁(yè)面的scrollTop

export function getScrollTop() {return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; }

總結(jié)

以上是生活随笔為你收集整理的document.body.scrollTop的值为零问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。