滚动条滚到底才能触发事件

最新推荐文章于 2023-10-31 23:13:34 发布
最新推荐文章于 2023-10-31 23:13:34 发布
阅读量601 收藏 1
点赞数
文章标签： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yan101795/article/details/111937492
版权

在这里插入图片描述

假设有info标签，只有当条件：
info.scrollHeight - info.scrollTop == info.clientHeight 满足时，即表明滚动条已到底部
下面代码表示只有当滚动条到底部时，复选框和注册按钮才能被操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#info{
				width: 300px;
				height: 500px;
				background-color: #bfa;
				overflow: auto;
			}
			
		</style>
		<script type="text/javascript">
			window.onload = function(){
				
				/*
				 * 当垂直滚动条滚动到底时使表单项可用
				 * onscroll
				 * 	- 该事件会在元素的滚动条滚动时触发
				 */
				
				//获取id为info的p元素
				var info = document.getElementById("info");
				//获取两个表单项
				var inputs = document.getElementsByTagName("input");
				//为info绑定一个滚动条滚动的事件
				info.onscroll = function(){
					
					//检查垂直滚动条是否滚动到底
					if(info.scrollHeight - info.scrollTop == info.clientHeight){
						//滚动条滚动到底，使表单项可用
						/*
						 * disabled属性可以设置一个元素是否禁用，
						 * 	如果设置为true，则元素禁用
						 * 	如果设置为false，则元素可用
						 */
						inputs[0].disabled = false;
						inputs[1].disabled = false;
					}
					
				};
				
			};
			
			
		</script>
	</head>
	<body>
		<h3>欢迎亲爱的用户注册</h3>
		<p id="info">
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
		</p>
		<!-- 如果为表单项添加disabled="disabled" 则表单项将变成不可用的状态 -->
		<input type="checkbox" disabled="disabled" />我已仔细阅读协议，一定遵守
		<input type="submit" value="注册" disabled="disabled" />
	</body>
</html>
雁落红楼
关注
判断滚动条滑到底部触发事件(实例讲解)
01-19
实例如下所示： $[removed](scroll, function () { //真实内容的高度 var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight); //视窗的高度 var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0; //隐藏的高度 var scrollHeight = w
html查看完成协议才可可注册
qq_45627570的博客
09-23 348
<style type="text/css"> #info{ width: 300px; height: 500px; background-color: #bfa; overflow: auto; } </style> <script type="text/javascript"> window.onloa...
HTML 滑动到页面底部触发事件
weixin_45436857的博客
06-17 530
<script> $(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if (scrollTop + windowHeight == scrollHeight) {
Js滚动到低触发事件
qq3305559894的博客
05-19 1587
今天我要分享的Js滚动到低触发事件的知识点 Body标签里放置h4标签作为标题，p标签里放置一篇文字，h4标签里放置一个input标签和label标签再来一个input标签，以下就是页面的内容，如下图所示； 正在上传…重新上传取消 接下来就是Css样式，如下图所示； 正在上传…重新上传取消 最后就是JS代码声明变量article，当article滚动到一定高度触发条件， 整个滚动区域的高度 正在上传…重新上传取消 clientHeight 滚动区域的可见高度 正在上传…重新上传取消 滚动
WPF ScrollViewer滚动条根据内容自动滚动到底部
君子居易
05-27 4275
WPF ScrollViewer包裹的容器中的如果出现动态填充，在填充的过程中需要最新填充的数据始终显示在UI上时，如果填充内容高度超出控件实际高度时，默认滚动条是不会进行垂直偏移设置的，新增加的内容也不会显示在UI上（内容自动网上顶），以下方法可实现内容自动网上顶。 public class ScrollViewerExtensions { public static readonly DependencyProperty AlwaysScrollToEndProperty ...
利用jquery禁止外层滚动条的滚动
01-19
可是有时我们希望用户只能滚动当前区域，而不触发外层（window）的滚动条，离开当前区域后，才能滚动外层的滚动条。因为用户可能一不小心滚动的幅度过大了，导致当前区域离开可视区域。 在jquery中，滚动事件是...
asp.net页面触发事件panel滚动条高度不变的实现方法
01-02
此文是为解决asp.net页面按钮点击触发事件后panel滚动条非自动回到顶端的解决方案，对于页面触发一个事件后，panel滚动条重新回到顶端，做下面的工作每次都要往下拉一下，特别是选择TreeView的时候，这个问题非常...
页面加载完毕后滚动条自动滚动一定位置
09-04
标题和描述提到的问题就是如何在页面加载完毕后让滚动条自动向左滚动一定的距离。 通常，我们可以通过JavaScript来操作页面的滚动位置。在JavaScript中，`document.documentElement.scrollLeft` 和 `document....
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
在Vue项目中，当使用vue-router进行页面切换时，我们经常需要实现滚动条自动滚动到顶部的效果，以提供用户友好的导航体验。这通常通过利用`Window.scrollTo()`方法来完成，该方法允许我们指定页面滚动到的精确位置。...
winform自定义滚动条
09-16
5. 事件触发：创建自定义事件，如ScrollChanged，当滚动条状态改变时，触发该事件供其他组件响应。 在提供的压缩包文件中，"cangqiongyiye-5390705-UCtlScrollBar_1631723415"可能包含了一个名为UCtlScrollBar的...
页面滚动到最下方时候触发事件的实现（scrollHeight、clientHeight、scrollTop 的使用）
KLW75
08-13 726
先直接上代码，解释在内容下方。 window.onscroll = function() { var a =document.documentElement.clientHeight; var b =document.documentElement.scrollTop; var c = docume...
window.onscroll 当页面滚动条、滚动到指定位置时触发
m0_64520392的博客
02-21 1843
获取滚动条的值
JS div滚动条下拉到底部时触发事件(懒加载)
个人记录
05-24 1732
JS div滚动条下拉到底部时触发事件(懒加载)
JavaScript滚动到底部触发事件
TechNovaX的博客
09-14 762
JavaScript滚动到底部触发事件在开发网页应用程序时，经常会遇到需要在用户滚动到页面底部时触发某种事件的需求。这种需求在实现无限滚动、自动加载更多内容或显示底部工具栏等场景中非常常见。在本篇文章中，我们将学习如何使用JavaScript来检测用户是否滚动到页面底部，并触发相应的事件。
Javascript实现当页面滚动到底部时触发加载事件
最新发布
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-31 451
Javascript实现当页面滚动到底部时触发加载事件
滚动条滚到底部触发事件
weixin_44588946的博客
04-29 1912
滚动条滚到底部触发事件 这里的是滚动条滚到底部触发事件，而不是滚动条在底部再滚动触发事件 Jquery代码： $('.scroll').scroll(function (e) { if (isScrollBottom(this)) { // 滚动到底端了 加载内容 //加载数据 appendloading("related"); } else { // 没有滚动到底端 其他处理...
Vue 滚动到底部触发事件 (防抖节流)
weixin_46212682的博客
08-22 3148
Vue 滚动到底部触发事件 (防抖节流)
避坑08_解决scrollTop是小数造成的问题
linxwx的博客
06-26 4377
解决方法：巧妙运用小于号。` if(info.scrollHeight - info.scrollTop < info.clientHeight) `
scroll-view 内table滚动不触发@scrolltolower
07-16
2. table的高度设置不正确：如果table的高度没有超过scroll-view的高度，那么就不会出现滚动条，自然也无法触发滚动事件。请确保table的高度超过scroll-view的高度。 3. scroll-view的属性配置问题：请检查scroll-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值