js 原生判断内容区域是否滚动到底部的实例代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js 原生判断内容区域是否滚动到底部的实例代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2730字，纯文字阅读大概需要4分钟。
内容图文
逻辑
判断内容滚动到底需要知道的信息
内容区域的真实高度（也就是滚动区域）
滚动条距离顶部的位置
内容区域的可见高度
分别对应下面的三个API。
element.scrollHeight 获取元素内容高度，，，【只读属性】
element.scrollTop 可以获取或者设置元素的偏移值，常用于，计算滚动条的位置,当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0.
element.clientHeight 读取元素的可见高度【只读属性】
下面直接引用MDN上面的一个经典的公式
判定元素是否滚动到底
如果元素滚动到底，下面等式返回true，没有则返回false.
element.scrollHeight - element.scrollTop === element.clientHeight
案例-用户使用协议
只有等用户阅读完协议才可以点击同意，也就是说滚动条到底部之后代表完成阅读
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
textarea{height: 200px;width: 300px}
</style>
</head>
<body>
<p>
<textarea>
用户咨询条款
一、咨询系统提供的服务
1、本网站咨询系统（以下简称“本系统”）为用户提供参与各种咨询项目（以下简称“项目”）的机会。用户在包之网上注册成为会员，并可申请某一专家会员通过包之网平台及电话等方式为其提供咨询服务。
2、您应按照您想要咨询的专家其所对应的专家收费金额，根据您希望互动/通话时间的长短，预先存入咨询费用，方可进行预约、咨询。咨询完成后，剩余的款项将在15个工作日内直接退还给您。您应提供详细的收款信息，否则本网站不承担任何责任。提请您注意，若预存金额过低，可能导致咨询中断。咨询费用根据本网站标准的专家收费金额及实际通话时间进行计算。您同意因银行处理本网站对您的每一笔付款所产生的全部费用将由您自行承担。
3、如果您对专家的工作内容或提供咨询服务质量等有异议，则在此等争议完全解决之前，本网站将扣留应付给您的款项。
4、如果您需要发票，应直接向提供咨询的专家要求，本网站不提供任何发票。
5、专家收费详见本网站不时发布的专家收费金额。专家收费金额及其修改均为本条款不可分割的组成部分，请您申请前仔细查看。
6、本网站根据实际情况尽可能根据您的要求、申请与专家进行匹配， 但专家有权不予提供服务。
</textarea>
</p>
<p>
<input type="checkbox" value="1" disabled="disabled"> 同意
</p>
<script>
//获取checkbox元素
var checkbox=document.querySelector('input[type=checkbox]');
document.querySelector('textarea').addEventListener('scroll',function () {
//读取内容区域的真实高度（滚动条高）
// console.log(this.scrollHeight);
//读取滚动条的位置
// console.log(this.scrollTop);
//设置滚动到的位置
// this.scrollTop=800;
//读取元素的高度
// console.log(this.clientHeight)
//意思就是内容总体的高度 - 滚动条的偏移值 === 元素的高度(包含内边)但不包含外边距，边框，以及滚动条
if(this.scrollHeight-this.scrollTop===this.clientHeight){
console.log("到达底部");
//移除disabled属性
checkbox.removeAttribute('disabled')
}
})
</script>
</body>
</html>
好吧，今天突然 看到mdn上面的这个API。脑补了一下
Element.scrollTop
以上这篇js 原生判断内容区域是否滚动到底部的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的js 原生判断内容区域是否滚动到底部的实例代码全部内容，希望文章能够帮你解决js 原生判断内容区域是否滚动到底部的实例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。