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 相关文章推荐
js 表格隔行颜色
Dec 02 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
jquery插件bootstrapValidator数据验证详解
Nov 09 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
vue下载二进制流图片操作
Oct 26 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
php简单浏览目录内容的实现代码
2013/06/07 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
sina的lightbox效果。
2007/01/09 Javascript
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
Python牛刀小试密码爆破
2011/02/03 Python
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
python如何实现一个刷网页小程序
2018/11/27 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
Python新手学习装饰器
2020/06/04 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
荷兰电脑专场:Paradigit
2018/05/05 全球购物
存储过程和sql语句的优缺点
2014/07/02 面试题
家长对老师的感言
2014/03/11 职场文书
户外活动策划方案
2014/03/12 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
证婚人致辞精选
2015/07/28 职场文书
优秀志愿者感言
2015/08/01 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
严以律己学习心得体会
2016/01/13 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
基于Python实现对比Exce的工具
2022/04/07 Python