详解js判断内容区域是否滚动到底部

小云云
풀어 주다: 2017-12-21 09:35:09
원래의
2769명이 탐색했습니다.

判断内容滚动到底需要知道内容区域的真实高度(也就是滚动区域),滚动条距离顶部的位置,内容区域的可见高度本文主要为大家分享一篇js 原生判断内容区域是否滚动到底部的实例代码,具有很好的参考价值,希望对能帮助到大家。

分别对应下面的三个API。

element.scrollHeight 获取元素内容高度,,,【只读属性】

element.scrollTop 可以获取或者设置元素的偏移值,常用于,计算滚动条的位置,当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0.

element.clientHeight 读取元素的可见高度【只读属性】

下面直接引用MDN上面的一个经典的公式

判定元素是否滚动到底

如果元素滚动到底,下面等式返回true,没有则返回false.


element.scrollHeight - element.scrollTop === element.clientHeight
로그인 후 복사

案例-用户使用协议

只有等用户阅读完协议才可以点击同意,也就是说滚动条到底部之后代表完成阅读


    tab  
  

同意

로그인 후 복사

好吧,今天突然 看到mdn上面的这个API。脑补了一下
Element.scrollTop

大家学会了吗?赶紧动手尝试一下吧。

相关推荐:

div内部滚动条滚动到底部和顶部功能的实现

jquery 页面滚动到底部自动加载插件集合_jquery

Javascript实现DIV滚动自动滚动到底部的代码_javascript技巧

위 내용은 详解js判断内容区域是否滚动到底部의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!