JS如何判断滚动条是否滚到底部

背景
解决方案（以纵向滚动条为例，横向滚动条方法类似）

背景

通常我们需要判断滚动条是否滚到底部，以实现相应的功能，如“加载更多”等。
那么如何通过js来判断滚动条是否滚到底部，请看以下方法

解决方案（以纵向滚动条为例，横向滚动条方法类似）

判断滚动条到底部，需要用到DOM的三个属性值，即clientHeight、scrollTop、scrollHeight。（横向滚动条则是clientWidth，scrollLeft，scrollWidth）

clientHeight为内容可视区域的高度。

scrollTop为滚动条在Y轴上的滚动距离。

scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。

从这个三个属性的介绍就可以看出来，滚动条到底部的条件即：
clientHeight + scrollTop === scrollHeight

const dom = document.getElementById('scrollElement');
dom.addEventListener('scroll', () => {const clientHeight = dom.clientHeight;const scrollTop = dom.scrollTop;const scrollHeight = dom.scrollHeight;if (clientHeight + scrollTop === scrollHeight) {console.log('竖向滚动条已经滚动到底部')}
})

JS如何判断滚动条是否滚到底部相关推荐

js实现判断滚动条滚到页面底部并执行事件的方法
这里我主要介绍JS实现判断滚动条滚到页面底部并执行事件的方法: 需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个 ...
JS小练习——判断滚动条是否到底部（onscroll事件）
实现功能要求:当我们下拉这个滚动条时,判断它是否到达最底部,如果到达最底部,则两个表单项可以点击,如果没有到达,则不可以点击.并且要勾选第一个按钮之后,才可以提交. disabled 属性可设置或返回 ...
JQuery 判断滚动条是否到底部
1 BottomJumpPage: function () { 2 var scrollTop = $(this).scrollTop(); 3 var scrollHeight = $(docume ...
JS判断滚动条到底部
form:http://www.uphtm.com/js/269.html判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. sc ...
java 滚动条的事件_[Java教程]jquery如何判断滚动条滚到页面底部并执行事件
[Java教程]jquery如何判断滚动条滚到页面底部并执行事件 0 2016-04-27 10:00:13 本文章向码农介绍jquery如何判断滚动条滚到页面底部并执行事件.首先理解三个dom元素, ...
JS滚动条到网页底部自动加载更多内容
2019独角兽企业重金招聘Python工程师标准>>> <html> <head> <meta charset="gb18030" ...
纯js监听滚动条到底部（vue版）
项目中,因为数据量过大,为提高页面性能,采用页面滑动滚动条到底部的时候再进行数据请求分页,这边给大给个核心,结合vue的生命周期用纯javascript写的一个监听函数第一个我们需要知道几个属性值 ...
php滚动条怎么用,如何让滚动条自动滚到最底部
让滚动条自动滚到最底部的方法:首先在DIV的底部添加一隐藏元素"element":然后调用"element.scrollIntoView()"方法:最后使元素滚 ...
js设置滚动条到div底部
/** * 设置聊天框中的滚动条始终在底部 */ function setScrollForBottom(id){ var height = documen ...

JS如何判断滚动条是否滚到底部

JS如何判断滚动条是否滚到底部

背景

解决方案（以纵向滚动条为例，横向滚动条方法类似）

JS如何判断滚动条是否滚到底部相关推荐

最新文章

热门文章