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 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
Javascript SHA-1:Secure Hash Algorithm
Dec 20 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
JSON语法五大要素图文介绍
Dec 04 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 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生成带有雪花背景的验证码
2008/09/28 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
基于python实现雪花算法过程详解
2019/11/16 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
培训专员岗位职责
2014/02/26 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记