scrollTop總為零原因；如何查看滾動條的位置或者說滾動條的滾動距離（待完善）
1、document.body.scrollTop的值總為零的原因
有一個功能需要判斷下拉的距離，設置頭部固定導航欄的顏色。
代碼如下：
<!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>Document</title>
<style>
body{
margin: 0;
padding: 0;
height: 1000px;
background-color: #ccc;
}
.header{
height: 100px;
width: 100%;
background-color: #E72C2C;
position: fixed;
top: 0;
}
</style>
</head>
<body>
<div>
<div id="header" class="header"></div>
</div>
<script>
window.onscroll = function () {
var sTop = document.body.scrollTop;
console.log(sTop);
if(sTop>100){
document.getElementById("header").style.backgroundColor = ‘#F59797‘;
}else{
document.getElementById("header").style.backgroundColor = ‘#E72C2C‘;
}
};
</script>
</body>
</html>
但是發現document.body.scrollTop一直是0。
查資料發現是DTD的問題。
頁面指定了DTD，即指定了DOCTYPE時，使用document.documentElement.scrollTop。
頁面沒有DTD，即沒指定DOCTYPE時，使用document.body.scrollTop。
2、各瀏覽器下 scrollTop的差異
IE：
對於沒有doctype聲明的頁面，使用 document.body.scrollTop 或 document.documentElement.scrollTop；
對於有doctype聲明的頁面，則使用 document.documentElement.scrollTop；
Chrome、Firefox：
對於沒有doctype聲明的頁面，使用 document.body.scrollTop 來獲取 scrollTop高度 ；
對於有doctype聲明的頁面，則使用 document.documentElement.scrollTop；
不管有沒有都可以用window.pageYoffset來獲取
Safari:
safari 比較特別，有自己獲取scrollTop的函數 ： window.pageYOffset ；
3、解決辦法
因此，為了兼容所有瀏覽器，封裝一個函數，去獲取頁面向上卷曲出去的距離和向左卷曲出去的距離
//獲得頁面向左、向上卷動的距離
function getScroll(){
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
因此，js代碼如下：
window.onscroll = function () {
//獲得頁面向左、向上卷動的距離
function getScroll(){
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
var sTop = getScroll().top;
console.log(sTop);
if(sTop>100){
document.getElementById("header").style.backgroundColor = ‘#F59797‘;
}else{
document.getElementById("header").style.backgroundColor = ‘#E72C2C‘;
}
};
---------------------
作者：sleepwalker_1992
來源：CSDN
原文：https://blog.csdn.net/sleepwalker_1992/article/details/80677845
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！
scrollTop總為零原因；如何查看滾動條的位置或者說滾動條的滾動距離（待完善）