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 相关文章推荐
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
实现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系统流量分析的程序
2006/10/09 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
php数组和链表的区别总结
2019/09/20 PHP
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
python实现的udp协议Server和Client代码实例
2014/06/04 Python
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
简单解析Django框架中的表单验证
2015/07/17 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Python用threading实现多线程详解
2017/02/03 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
Python 定义只读属性的实现方式
2020/03/05 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
小学端午节活动方案
2014/03/13 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
党性修养心得体会2016
2016/01/21 职场文书
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL