<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
<div id="part1" style="height:2000px;overflow: auto;background: lightblue;">
</div>
<div id="part2" style="height:3000px;overflow: auto;background:lightcoral;">
</div>
<script>
console.info(document.body.scrollHeight);
console.info(document.body.clientHeight);
console.info(document.body.offsetHeight);
var d = document.getElementById("part1").offsetHeight;
console.info(d);
window.addEventListener("scroll", function(event) {
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
console.log(scrollTop);
});
</script>
</body>
</html>
寫了這個簡單的demo測試。
我想通過 scrollTop 與 scrollHeight 比對來判斷是否滾動到底部,但是發現當滾到 part1底部的時候 scrollTop 是1700多,part1的高度為2000px。
當滾到 part2底部的時候 scrollTop 是4300多,part2的高度為3000px,總體body的高度應該為5000px。
這裡面的 200多 和 600多 都是被什麼給占了。。。
要說滾動條(scrollbar)也不可能有那麼高,
看得我一愣一愣的完全不明白了。
CSS1Compat獲取可是高度是document.documentElement,不是document.body
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
<div id="part1" style="height:2000px;overflow: auto;background: lightblue;">
</div>
<div id="part2" style="height:3000px;overflow: auto;background:lightcoral;">
</div>
<script>
var viewHeight = document[document.compatMode == 'CSS1Compat'?'documentElement':'body'].clientHeight;
var scrollHeight = document.body.scrollHeight;
var timer;
window.addEventListener("scroll", function (event) {
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
timer = clearTimeout(timer);
if (scrollTop + viewHeight >= scrollHeight)console.log('at Bottom');
});
</script>
</body>
</html>