这里我主要介绍JS实现判断滚动条滚到页面底部并执行事件的方法：
需要了解三个dom元素，分别是：clientHeight、offsetHeight、scrollTop。
clientHeight：这个元素的高度，占用整个空间的高度，所以，如果一个div有滚动条，那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。
offsetHeight：是指元素内容的高度。依照上面的，那这个高度呢就是DIV内部的高度，包括可见部分及以滚动条下面的不可见部分。
scrollTop：这个是什么呢？他可以理解为滚动条可以滚动的长度。
举例，如果一个DIV高度是400px（即clientHeight为400），而里面的内容是一个很长的列表，内容的高度是1000px（即offsetHeight为1000）。那么，可见部分我们看到400px，1000px的内容中还有600px不可见。而这不可见的部分呢，正是我们通过拉动滚动条才能把这一部分显示出来。你如果滚动条不拉动，此时scrollTop为0，如果你把滚动条拉到底，显示出列表最下面的部分，此时，scrollTop为600。 所以scrollTop的取值区间为[0, 600]。 所以这个600可以理解为滚动条可以滚动的长度。
理解完上面的这个概念之后。要判断是否滚动到底部就很好做了。
首先，我们拉动滚动条，从最上面拉到最下面，变化的是scrollTop的值，而这个值是有一个区间的。
这个区间是： [0, (offsetHeight - clientHeight)]
即，滚动条拉动的整个过程的变化在 0 到 (offsetHeight – clientHeight) 范围之内。
1、判断滚动条滚动到最底端： scrollTop == (offsetHeight – clientHeight)
2、在滚动条距离底端50px以内： (offsetHeight – clientHeight) – scrollTop <= 50
3、在滚动条距离底端5%以内： scrollTop / (offsetHeight – clientHeight) >= 0.95
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滚动加载新闻</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#box {
width: 180px;
height: 240px;
overflow-y: scroll;
position: fixed;
right: 50%;
top: 50%;
margin-right: -90px;
margin-top: -120px;
font-size: 12px;
}
p {
color: #61AFEF;
}
</style>
<script type="text/javascript">
window.onload = function() {
var box = document.getElementById('box');
box.addEventListener('scroll', function() {
var scrollHight = this.scrollHeight;
var clientHeight = this.clientHeight;
var scrollTop = Math.ceil(this.clientTop);
if (scrollTop <= scrollHight + clientHeight) {
var pNode = document.createElement('p');
pNode.innerHTML = '已经到底了，看看别的吧';
box.appendChild(pNode);
}
})
}
</script>
</head>
<body>
<div id="box">
花瓣自然飘落，与人为摇动使之飘落，结果大不一样。自然飘落，是自然规律所致，而人为摇晃，不但会使树木枝叶受到伤害，严重的还会让树木因根部松动而倒地甚至死亡，摇树拍照，掉落一地的，除了花瓣，还有人的素质。摇树拍照，也给小孩子做了坏的示范。2021年4月10日，湖北襄阳某公园里，为了让姐姐拍照更好看，几名小孩摇树造“樱花雨”，同伴在旁拍照。一名男孩称，看着好多大人为了拍照，在樱花树下这样做，他们也是照着学的。可见大人的举手投足，会潜移默化影响孩子，大人们不知不觉中将不文明习惯传给了孩子。摇树拍照，伤害的不只是树木，还有孩子。我们要对此类不文明行为大声说“不”，让文明成为一种行为习惯，一种生活方式，像呼吸一样自然。
</div>
</body>
</html>