document.body.scrollTop的值为零问题
生活随笔
收集整理的這篇文章主要介紹了
document.body.scrollTop的值为零问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
document.body.scrollTop的值為零問題
問題背景：在做監聽滾動到底部事件時，發現document.body.scrollTop的值一直為零
網上查資料發現是各個瀏覽器下對是否有聲明的scrollTop有差異
IE：
對于沒有聲明的頁面，使用 document.body.scrollTop 或 document.documentElement.scrollTop；
對于有聲明的頁面，則使用 document.documentElement.scrollTop；
Chrome、Firefox：
對于沒有聲明的頁面，使用 document.body.scrollTop 來獲取 scrollTop ；
對于有聲明的頁面，則使用 document.documentElement.scrollTop；
Safari:
safari 比較特別，有自己獲取scrollTop的函數 ： window.pageYOffset ；
可以使用下面代碼在各個瀏覽器進行打印測試
<!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>已經定位問題，如何解決呢？
為了兼容所有瀏覽器，封裝一個函數，去獲取頁面的scrollTop
export function getScrollTop() {return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; }總結
以上是生活随笔為你收集整理的document.body.scrollTop的值为零问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 充满阳光的句子简短197个
- 下一篇： （二）命名规范