scrollTop + clientHeight = scrollHeight

(function ($) {
var htmlItem = "<li class='category-item'>" + "<img class='item-icon' src=$url />" + "<p class='item-name'>$name</p>" + "</li>";
function getHead() {
$.ajax({
url: "../../JS/json/head.json",
dataType: "json",
type: "get",
success: function (data) {
if (data.msg === "成功") {
console.log(data)
var itemlist = ""
var data = data.data.primary_filter.splice(0, 10);
data.forEach((item, index) => {
var str = htmlItem
.replace("$url", item.url)
.replace("$name", item.name)
itemlist += str

});
console.log(itemlist)
$(".category").append($(itemlist))

}
}
})
}
getHead()



var homelist = "<li class='homelist-item'><img class='homelist-item-img' src=$url />" +
"<div class='word'>" +
"<h3 class='word-title'>$title</h3>" +
"<div class='word-discrpt'><div class='word-discrpt-l'><div class='word-star'>评分:$star</div><div class='word-sales'>月销:$sales</div></div><div class='word-distance'>$time | $distance</div></div>" +
"<div class='word-money'>$money</div>" +
"<ul class='word-active'>$active</ul>" +
"</div>" +
"</li>"
var discounts = "<li class='word-active-item'><img class='word-active-img' src=$icon_url /><p class='word-active-info'>$info</p>"

var page = 0;
var isLoading = false
function getList() {
page = page + 1;
isLoading = true;
$.ajax({
url: "../../JS/json/homelist.json",
dataType: "json",
type: "get",
success: function (data) {
if (data.msg === "成功") {

console.log(data)
var itemlist = ""
var data = data.data.poilist || []
data.forEach((item, index) => {
if (item.month_sale_num >= 1000) {
var sale_num = "999+"
} else {
sale_num = item.month_sale_num
}

var active = ""
item.discounts2.forEach((i, j) => {
var src = discounts
.replace("$icon_url", i.icon_url)
.replace("$info", i.info)
active += src
})

var str = homelist
.replace("$url", item.pic_url)
.replace("$title", item.name)
.replace("$star", item.wm_poi_score)
.replace("$sales", sale_num)
.replace("$time", item.mt_delivery_time)
.replace("$distance", item.distance)
.replace("$money", item.min_price_tip)
.replace("$active", active)
itemlist += str


});
/* console.log(itemlist) */
$(".list").append($(itemlist))
isLoading = false

}
}
})
}

getList()
var clientHeight = document.documentElement.offsetHeight;
function addEvent() {
window.addEventListener('scroll', function () {

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var scrollHeight = document.body.scrollHeight;
var proDis = 0;

console.log(scrollTop + "+" + clientHeight + "=" + (scrollTop + clientHeight) + ">=" + (scrollHeight - proDis))

if ((scrollTop + clientHeight) >= (scrollHeight - proDis)) {
if (page < 4) {
if (isLoading) {
return;
}
getList()
}
}
})

}
addEvent()
})(jQuery)

scrollTop + clientHeight = scrollHeight

按道理来说，scrollTop + clientHeight 应该等于 scrollHeight，为什么我把页面拉到最下面，scrollTop + clientHeight 比 scrollHeight还要小1000多，是什么原因呢？跟rem的设置有关系吗？

还有，我如果把var clientHeight = document.documentElement.offsetHeight;放到scroll事件内来声明的话，他的值就和body的高一摸一样，放在外面的就是对的，这是什么情况呢