全国咨询热线:18720358503

米拓商城微信小程序_js 原生判断内容区域是否滚

类别:行业新闻 发布时间:2021-01-11 浏览人次:

js 原生判断内容区域是否滚动到底部的实例代码       下面笔者就为大家分享一篇js 原生判断内容区域是否滚动到底部的实例代码,具有很好的参考价值,希望对大家有所帮助

分别对应下面的三个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 
 textarea 
 用户咨询条款
 一、咨询系统提供的服务
1、本网站咨询系统(以下简称“本系统”)为用户提供参与各种咨询项目(以下简称“项目”)的机会。用户在包之网上注册成为会员,并可申请某一专家会员通过包之网平台及电话等方式为其提供咨询服务。
2、您应按照您想要咨询的专家其所对应的专家收费金额,根据您希望互动/通话时间的长短,预先存入咨询费用,方可进行预约、咨询。咨询完成后,剩余的款项将在15个工作日内直接退还给您。您应提供详细的收款信息,否则本网站不承担任何责任。提请您注意,若预存金额过低,可能导致咨询中断。咨询费用根据本网站标准的专家收费金额及实际通话时间进行计算。您同意因银行处理本网站对您的每一笔付款所产生的全部费用将由您自行承担。
3、如果您对专家的工作内容或提供咨询服务质量等有异议,则在此等争议完全解决之前,本网站将扣留应付给您的款项。
4、如果您需要发票,应直接向提供咨询的专家要求,本网站不提供任何发票。
5、专家收费详见本网站不时发布的专家收费金额。专家收费金额及其修改均为本条款不可分割的组成部分,请您申请前仔细查看。
6、本网站根据实际情况尽可能根据您的要求、申请与专家进行匹配, 但专家有权不予提供服务。
 /textarea 
 input type="checkbox" value="1" disabled="disabled" 同意
 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')

Element.scrollTop

以上这篇js 原生判断内容区域是否滚动到底部的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。


推荐阅读

米拓商城微信小程序_js 原生判断内容区域是否滚

js 原生态分辨內容地区是不是翻转究竟部的案例编码 下边小编就为大伙儿共享一篇js 原生态分辨內容地区是不是翻转究竟部的案例编码,具备非常好的参照使用价值,期待对大伙...

2021-01-11
在“互联网+”下被颠覆的商业经济模式

企业动态性制造行业新闻资讯建网站有关九度角度强烈推荐信息内容 在“互连网+”下被颠复的商业服务经济发展方式 重要词:互连网 共享资源经济发展 大生产制造 销售市场经济发展...

2021-01-11
北京市建网站实例-爱特Aite:适合企业网站建设的

建网站选AiTe,就正确了!结合1六年工作经验打造出的可用于营销推广营销推广展现拓客建网站系统软件,更加容易用的后台管理、更丰富多彩的制造行业模版、更简易的模版制作改动...

2021-01-11
企业搭建网站需要注意什么?

伴随着互连网电子器件商务接待的越来越越普及化,公司越来越越观念到网站针对公司的关键性了,一个比较好的网站能够为公司提升知名品牌危害力,扩展公司业务流程方式等,下边...

2021-01-11
小程序自助开发工具_加载 vue 长途代码的组件实

载入 vue 远程控制编码的部件案例详细说明 文章投稿:mrr vue-cli 做为 Vue 官方网强烈推荐的新项目搭建脚手架,它出示了开发设计全过程中常会用的,热轻载,搭建,调节,模块检...

2021-01-11
广州网络公司外贸企业网站推行引流的7种有用方

重要词:广州市互联网企业出口外贸公司网站实行引流方法的7种有效方式 现有 1505 人访问 很多出口外贸型公司都是有英语公司官方网站,但大部分分却沒有非常好充分发挥其功效,如同...

2021-01-11
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信