js实现判断滚动条滚到页面底部并执行事件的方法

这里我主要介绍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>

js实现判断滚动条滚到页面底部并执行事件的方法相关推荐

java 滚动条的事件_[Java教程]jquery如何判断滚动条滚到页面底部并执行事件
[Java教程]jquery如何判断滚动条滚到页面底部并执行事件 0 2016-04-27 10:00:13 本文章向码农介绍jquery如何判断滚动条滚到页面底部并执行事件.首先理解三个dom元素, ...
JS小练习——判断滚动条是否到底部（onscroll事件）
实现功能要求:当我们下拉这个滚动条时,判断它是否到达最底部,如果到达最底部,则两个表单项可以点击,如果没有到达,则不可以点击.并且要勾选第一个按钮之后,才可以提交. disabled 属性可设置或返回 ...
JS如何判断滚动条是否滚到底部
JS如何判断滚动条是否滚到底部背景解决方案(以纵向滚动条为例,横向滚动条方法类似) 背景通常我们需要判断滚动条是否滚到底部,以实现相应的功能,如"加载更多"等. 那么如何通过 ...
javascriptjquery 判断滚动到页面底部
js 判断滚动到页面底部 CreateTime--2018年4月14日10:13:07 Author:Marydon 1.使用场景: 滚动到屏幕底部,触发加载分页数据请求(qq空间,手机端) 2.代码 ...
html 滚动条处于页面底部,滚动条一直置于页面底部,开发聊天程序须知。
有些时候(如开发聊天程序),我们需要将将滚动条(scrollbar)保持在最底部,比如聊天窗口,最新发出和收到的信息要显示在最下方,如果要看到最下方的内容,就必须保证滚动条保持在最底部. html P ...
js中判断文本框是否为空的两种方法
js中判断文本框是否为空的两种方法 //用户名非空验证 function checkUserName(){ var name = document.myform.txtUser; //在这里我认为: ...
JQuery 判断滚动条是否到底部
1 BottomJumpPage: function () { 2 var scrollTop = $(this).scrollTop(); 3 var scrollHeight = $(docume ...
js打开新窗口与页面跳转的几种方法
1.window.location.href=URL : 在本窗体打开一个新的页面,也是最常用的一种方法: 2.window.open(URL) : 在一个新的窗口打开一个新的页面: 3.loca ...
vue滚动条滚到到底部触发的方法
1.设置需要滚动的盒子首先要有滚动条 overflow-y:auto 或overflow-y: scroll; 然后设置事件@scroll="scrollEvent" 方法名自 ...

js实现判断滚动条滚到页面底部并执行事件的方法

js实现判断滚动条滚到页面底部并执行事件的方法相关推荐

最新文章

热门文章