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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
原生JS实现拖拽效果
Dec 04 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中防止恶意刷新页面的代码小结
2012/10/31 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
PHP CURL使用详解
2019/03/21 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
windows下python连接oracle数据库
2017/06/07 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
Python运行异常管理解决方案
2020/03/09 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
广告设计应届生求职信
2014/03/01 职场文书
爱之链教学反思
2014/04/30 职场文书
公司介绍信范文
2015/01/31 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
python opencv旋转图片的使用方法
2021/06/04 Python
浅谈Java父子类加载顺序
2021/08/04 Java/Android
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript