js 原生判断内容区域是否滚动到底部的实例代码


Posted in Javascript onNovember 15, 2017

逻辑

判断内容滚动到底需要知道的信息

内容区域的真实高度(也就是滚动区域)

滚动条距离顶部的位置

内容区域的可见高度

分别对应下面的三个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 原生判断内容区域是否滚动到底部的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
Webpack的dll功能使用
Jun 28 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
JavaScript计算出两个数的差值
Mar 19 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 #Javascript
判断div滑动到底部的scroll实例代码
Nov 15 #Javascript
Vue.js实现列表清单的操作方法
Nov 15 #Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 #Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 #Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 #Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 #Javascript
You might like
js和php邮箱地址验证的实现方法
2014/01/09 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
Python中的map、reduce和filter浅析
2014/04/26 Python
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
证婚人搞笑证婚词
2014/01/10 职场文书
安全责任书范文
2014/03/12 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
2014年基建工作总结
2014/12/12 职场文书
小学班主任事迹材料
2014/12/17 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
详解Laravel制作API接口
2021/05/31 PHP