JS判断滚条是否滚到底部

最新推荐文章于 2021-12-16 21:10:32 发布

阿华°

最新推荐文章于 2021-12-16 21:10:32 发布

阅读量645

点赞数

本文链接：https://blog.csdn.net/weixin_44588757/article/details/91355760

版权

JS判断滚条是否滚到底部
功能需求：当我们下拉这个滚动条时，判断它是否到达最底部，如果到达最底部，则两个表单项可以点击，如果没有到达，则不可以点击。并且要勾选第一个按钮之后，才可以提交。

disabled 属性可设置或返回是否禁用 checkbox。
语法：Object.disabled=true|false
true表示禁用 false表示可用
clientWidth clientHeight
这两个属性都可以获取元素的可见高度和宽度
会获取元素的宽度和高度，包括内容区和内边距
offsetWidth offsetHeight
获取元素的整个宽度和高度，包括内容区和内边距，边框
scrollLeft 可以获取水平滚动条的距离
scrollTop 可以获取垂直滚动条的距离
scrollWidth scrollHeight
可以获取元素整个滚动区域的宽度和高度
等式成立时表示垂直滚动条到达最底部
Object.scrollHeight-Object.scrollTop==Object.clientHeight
等式成立时表示水平滚动条到达最右端
当满足Object.scrollWidth-Object.scrollLeft=Object.clientWidth

JS代码:
window.οnlοad=function(){
当垂直滚动条到底时使表单项可用
该事件会在元素的滚动的时候触发
获取id为info的p元素
var info=document.getElementById(“info”);
var btn01=document.getElementById(“btn01”);
var btn02=document.getElementById(“btn02”);
为info绑定一个滚动条滚动事件
info.οnscrοll=function(){
检查垂直滚动条是否到底部
if(info.scrollHeight-info.scrollTop==info.clientHeight){
到底部使表单项可用
btn01.disabled=false;
btn02.disabled=false;
}
}

我们还要实现必须要勾选第一个按钮，才能按下提交按钮
		btn02.onclick=function(){
		if(btn01.checked==true){
         		alert("登录成功！");
     		}
			else{
				alert("请勾选前面的协议条款，谢谢！");
    			}
		}
	}