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

最新推荐文章于 2024-06-07 08:21:52 发布
最新推荐文章于 2024-06-07 08:21:52 发布
阅读量571 收藏 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>
雁落红楼
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html查看完成协议才可可注册
qq_45627570的博客
09-23 313
<style type="text/css"> #info{ width: 300px; height: 500px; background-color: #bfa; overflow: auto; } </style> <script type="text/javascript"> window.onloa...
Js滚动到低触发事件
qq3305559894的博客
05-19 1546
今天我要分享的Js滚动到低触发事件的知识点 Body标签里放置h4标签作为标题，p标签里放置一篇文字，h4标签里放置一个input标签和label标签再来一个input标签，以下就是页面的内容，如下图所示； 正在上传…重新上传取消 接下来就是Css样式，如下图所示； 正在上传…重新上传取消 最后就是JS代码声明变量article，当article滚动到一定高度触发条件， 整个滚动区域的高度 正在上传…重新上传取消 clientHeight 滚动区域的可见高度 正在上传…重新上传取消 滚动
平滑滚动60fps「Smooth Scrolling with 60fps」-crx插件
03-15
修复位置：通过添加transform：translateZ（0）到元素来修复。平滑滚动60fps。 该扩展通过将transformZ（0）添加到position：fixed的图层来优化滚动性能。这触发硬件加速并使滚动更流畅。 在选项页面中，您可以打开和关闭功能，并决定您是否喜欢速度或效果。 我也设法把这个技巧应用到真正的chromium.app中，所以你可以把它作为一个“原生”的chrome特性，而不需要扩展名。对于勇敢的人来说，这里是一个从我的下载箱下载的测试版：（用补丁编译的最新铬版） https://www.dropbox.com/s/cesnf1ekte8kwmn/Chromium.app.zip?dl=0 屏幕截图显示了扩展的不同之处。请参阅截图的地址栏中的评论。 a）未优化的，大量的绿色重绘区域，b）启用了扩展，仍然滚动条是绿色的 c）用补丁chromium.app替代滚动条被隐藏的地方，根本没有绿色重绘。 我尝试将修补程序（实际上只有2行代码）提交给官方的铬git，但可能需要一段时间才能访问并获得批准。但在几个星期内，它可能是正常的chrome.app的一部分，所以每个人都可以从更好的滚动体验中受益。 这个扩展的代码也可以在github上获得： https://github.com/ayurmedia/fixfixed v0.1：初始 v0.2：错误修复 v0.3：性能改进+错误修正。 v0.4：修正了评论中的错字 v0.5：代码清理和错误修正，希望是今天的最后一个版本;） v0.6：清理，优化 v0.7：代码优化 v0.8：实现了图标+徽章 - 数字改进的div，也是新的选项页面 v0.9：优化的默认设置。 v1.0：现在直接读取css并修补css。更有效，更少的错误检测。 v1.1：错误修正，更好地解析CSS，尊重媒体查询，重新应用转换以减少误报。 v1.2：错误修正子像素antializing translateZ（0）强制灰度反锯齿，所以现在只在滚动时应用css，在滚动完成时删除 （阅读期间）。 v1.4：改进，关闭反锯齿修复的选项更快，antilizefix的延迟选项以毫秒为单位 （见选项） 此扩展功能与“SmoothScroll”扩展程序结合使用也很好：https：//chrome.google.com/webstore/detail/smoothscroll/nbokbjkabcmbfdlbddjidfmibcpneigj 请评价扩展和反馈和错误报告，这有助于我改善扩展。 问候， 丹尼尔 支持语言:English
AXURE9最新版，小版本号3646，序列号可用（win版本）
04-26
注意： 有同学发现RP 9在选中元件，不能快速键入文字了。只能双击才能输入。这是因为RP9增加了一个新功能。 在版本9开发过程中，我们的主要目标之一是使Axure RP 更快。为了达到这一目标，我们做了许多重要的性能改进和UI优化，并且它还为我们提供了单键快捷方式。 只需按一个字母按键，然后单击并拖动就可以生成相应类型的窗口小部件。 单键快捷键功能可以在偏好设置里关闭。关闭该功能后，选中元件时键入文字，会在该元件上快速添加文本（恢复成RP8版本时那样）。但这种快捷输入有个BUG，输入中文时，第一个字符会变成字母。因为还没变成输入状态，中文输入法都没启动。所以。。你就别关闭这个功能了。 界面布局改版 AxureRP 9.0在极简主义设计的道路上越走越远，整个界面的颜色搭配与icon图标设计给人的感觉更简洁、更朴素，没有太多的附加装饰。 1. 界面的主色调采用了极简主义色调黑白灰。 2. 所有的输入项填写均由以前的输入框形式调整成了输入线。 3. 生成原型的设置界面，由原来竖行的菜单栏调整成了右侧的标签导航，左侧为路径、浏览器、默认页面的设置。改变后的界面，可以减少用户的操作，我们只需要在一个界面窗口中完成所有的配置。 4. 丰富了钢笔工具的功能，工具栏的插入功能不仅保留了原有的钢笔工具，还增加了矩形、椭圆、线条、文本以及各类形状。通过拖拽可以直接绘制各类形状并随心所欲的控制尺寸大小。 5. 工具栏中默认收起了上下对齐方式、元件排列方式，点击双箭头图标进行展开。 6. 工具栏中将文本对齐方式进行了隐藏，点击双箭头展开。 7. 工具栏中去除了尺寸设置和固定元件操作。 8. 页面导航面板与元件管理面板进行了合并。 9. 元件库面板与母版面板进行了合并。 10. 针对Icons库中满目庞杂的元件进行了归类。 11. 样式面板中的样式交互移入至元件交互中。 元件功能优化 虽说AxureRP 9.0并没有增加新的元件，但9.0的元件使用体验及增加的小功能却超出了我的预期。在进行线框图的绘制时，更加得心应手了，极大了提高设计的效率与线框图质量。 1. 方框、椭圆、占位符、BUTTON按钮等形状类元件增加了导入图片功能，这里的图片导入不同于图像元件的图片导入，通过形状元件导入的图片将限定在元件内部。 2. 可以灵活控制文本内容的边距，即文字距离元件上下左右四条边的距离。 3. 导入图片时，能够设置图片的中心点，默认为左上角，可以选择顶部、底部、左上角、左下角、右上角和右下角。 4. 图片支持水平翻转、垂直翻转。 5. 元件不仅可以设置外部阴影，也可以设置内部阴影。 6. 边框线的粗细可以通过的宽度进行更灵活的设置，只需要填写数字即可。 7. 布尔运算增加了结合和分开。 8. 移动元件时，自动显示距离最近元件的距离。 9. 增加了流程图的元件。 10. 针对Icons元件库的元件进行了整理分类，元件的数量也更丰富。 11. 元件增加悬停样式效果，鼠标悬停时，元件周围显示边框线。 12. 优化元件选中效果。 13. 编辑动态面板和中继器时，减少了页面标签的数量，优化编辑体验，新增隔离功能。 14. 文本字符的行距和间距的调整更加精确灵活。 15. 元件库支持导入本地图片文件夹。 16. 元件支持添加多条注释说明，在查看HTML文件时，可一次性展开所有说明。 17. 中继器背景支持颜色交替显示。 交互设置流程优化 新的交互构建器已经过全面重新设计和优化，易于使用。 从基本设置到复杂的中继器、函数、条件流，可以在更短的时间内以更少的点击次数将你的原型变为现实。具体的变化表现在以下几点： 1. 交互事件默认进行了隐藏处理，点击新建交互，才可以查看交互事件。 2. 交互用例的设置更加流水化，每点击一步操作自动触发下一步的设置，这样设计的好处在于减少弹窗界面的数量，减少用户点击次数 3. 元件的交互样式移入至交互事件列表。 4. 每个元件的常用交互直接显示在交互面板下方，如中继器的每项载入时事件；如中继器的单击时，设置为下一个状态；向左拖动结束时，显示为上一个状态；向右拖动结束时，显示为下一个状态。 其它改进 1. 调色板增加了渐变色的灵活调整，支持线性渐变和径向渐变，增加HSV拾取器的新颜色选择器。 2. 页面样式新增移动端尺寸，包含了安卓与IOS主流机型尺寸。 3. 画布取消了滚动栏（可能有些同学不适应了），增加负屏显示。 4. 帮助菜单栏新增Axure官方论坛。 5. 优化浏览器中原型显示效果，新增自适应浏览器宽度，增加上一页（）的快捷方式。 6. 浏览器中查看移动端原型时，优化光标显示效果，增加上下滚动条。 最后的小结 从整体上来看，AxureRP 9.0针对8.0的版本迭代还是做出了很大的改进，简洁的界面设计，元件的新增功能，以及
AudioVisualizer-crx插件
03-11
音频可视化工具，适用于任何网站。按图标或'Ctrl + Q'开始/停止 ♪┐（·。·┐） *可在任何网站上使用。 *从几个场景中选择。 *分享自定义场景。 *它是开源的*添加了MilkDrop！ 一探究竟！ 具有100种不同的预设！ （将来会提供对Milkdrop的更多支持！）*调整“常规”设置以获得不同的效果（几乎在所有场景上）。 （DrawMode，TransparentBackground等。）*播放场景设置以从根本上更改任何场景。 （使用默认设置，场景看起来很无聊）*将自定义场景设置保存和/或共享为独立场景。 注意：此扩展名包含闪烁效果。 热键：* Ctrl + Q-启用/禁用可视化工具。 （有时必须单击2次才能开始）* Alt + Q-打开选项。 提示：*在场景设置下，将鼠标悬停在要更改的值上，然后在按住鼠标左键的同时向上/向下拖动鼠标以增加/减小值。 *将LatencyHint设置为交互式，这将使频谱分析更加精确，但可能会在您发出断断续续的声音时触发错误。 在这种情况下，请将其设置回“播放”。 贡献：*非常欢迎提出建议，请求，新场景或其他想法。 https://github.com/afreakk/ChromeAudioVisualizerExtension补丁说明：6.0.10-Spectrum Analyziz 6.0.9的默认设置较不疯狂-禁用了两个比较慢的黄油场景。 6.0.8-Chrome更新中断了已使用的功能，无法再直接设置runtime.Port.name，导致扩展程序抛出异常，并且无法将音频数据传递到场景。 现在通过将对象中的名称传递给chrome.tabs.connect进行了修复。 6.0.6-7-向SpectrumAnalizyz添加了选项“ opacity”-默认情况下将ProceduralTerrain设置为较低的多边形（您仍然可以在场景设置中选择所需的多边形分辨率）-添加了选项“ FadeControls”（当鼠标不在上方时淡入淡出控件）控件（启用时启用）6.0-添加了MilkDrop支持（来自butterchurn ttps：//github.com/jberg/butterchurn）！ -将对此提供更多支持，例如创建和使用自定义MilkDrop插件5.2的可能性-使自定义ProceduralTerrain场景起作用，它们已被窃听。 -在proceduralTerrain中使透明背景起作用-添加了场景：DacingCubes3DSinus-添加了场景：DacingCubes3D-添加了共享场景的站点-添加了场景：DancingCubes-添加了选项：“ LatencyHint”，默认值设置为：“播放”。 之前我们一直使用“交互式”功能，但是在某些浏览器版本上却引起断断续续的声音。 “播放”选项的准确性不如“互动”，因此，如果您没有任何带有“互动”的杂项问题，则应运行“互动” :)。 -使70年代的场景对音乐更具React性5.1-新增了程序地形场景！ 5-添加了导入和导出自定义场景，现在您可以与他人共享场景！ 4.500.1.5-添加回webgl场景..似乎chome已解决问题？ 4.500.1.4-删除了webgl场景，chrome + contentscript + webgl，-无法正常工作。 4.500.1.3-Startupscene现在可以使用+优化。 4.500.1-DrawMode现在应该在没有transparentmode的情况下工作。 （启用了drawmode时，transparentmode将始终在后台处于活动状态（因此场景不会重绘其背景））4.500-性能改进，发现代码中的错误会重新调整画布的大小。 Drawmode可以恢复工作了（在opengl场景中除外：spiningcube，sinusmode和madness）画布不再跟随滚动。 4.420.9-Madness Scene添加了：O 4.420.8-稳定性和性能更新，并删除了绘图模式（不适用于较新的chrome）。 4.420.7.2-画布宽度将不再构成垂直滚动条，并且画布现在将被锁定为滚动高度。 （如果有人真的喜欢可以滚动离开画布，则可以选择它）4.420.7-新图标！ :) 4.420.5-6-新功能：用于酷炫效果的DrawMode（位于设置下）（不适用于六边形，spinningcube或sinuscolormix）-保存场景错误修正4.420.1-4-新的错误修正（上下文偏移++） -scene（来自WormScene的PainScene）-添加了全屏设置。 4.420-两个新场景（DotsAndLines和ParticleCircle），更好的选项和选项体验以及常规代码改进（希望如此）。 4.20
判断滚动条滑到底部触发事件(实例讲解)
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
JS div滚动条下拉到底部时触发事件(懒加载)
个人记录
05-24 1568
JS div滚动条下拉到底部时触发事件(懒加载)
页面滚动到最下方时候触发事件的实现（scrollHeight、clientHeight、scrollTop 的使用）
KLW75
08-13 673
先直接上代码，解释在内容下方。 window.onscroll = function() { var a =document.documentElement.clientHeight; var b =document.documentElement.scrollTop; var c = docume...
WPF ScrollViewer滚动条根据内容自动滚动到底部
君子居易
05-27 3763
WPF ScrollViewer包裹的容器中的如果出现动态填充，在填充的过程中需要最新填充的数据始终显示在UI上时，如果填充内容高度超出控件实际高度时，默认滚动条是不会进行垂直偏移设置的，新增加的内容也不会显示在UI上（内容自动网上顶），以下方法可实现内容自动网上顶。 public class ScrollViewerExtensions { public static readonly DependencyProperty AlwaysScrollToEndProperty ...
window.onscroll 当页面滚动条、滚动到指定位置时触发
m0_64520392的博客
02-21 1507
获取滚动条的值
利用jquery禁止外层滚动条的滚动
01-19
可是有时我们希望用户只能滚动当前区域，而不触发外层（window）的滚动条，离开当前区域后，才能滚动外层的滚动条。因为用户可能一不小心滚动的幅度过大了，导致当前区域离开可视区域。 在jquery中，滚动事件是...
asp.net页面触发事件panel滚动条高度不变的实现方法
01-02
此文是为解决asp.net页面按钮点击触发事件后panel滚动条非自动回到顶端的解决方案，对于页面触发一个事件后，panel滚动条重新回到顶端，做下面的工作每次都要往下拉一下，特别是选择TreeView的时候，这个问题非常...
html+监听+页面滚动到底部,解决HTML5中滚动到底部的事件问题
weixin_32899267的博客
06-03 1048
问题：在H5中，我们有这样的需求：例如有列表的时候，滚动到底部时，需要加载更多。解决方案：可以采用window的滚动事件进行处理分析：如果滚动是针对整个屏幕而言的(不针对于某个界面小块)，那么这个应该是是成立的：屏幕的高度+最大滚动的距离 = 内容的高度代码实现：监听滚动到底部滚动底部.div2{width:100px;height:100px;border:1px solid red}*{mar...
滚动条滚到底部触发事件
weixin_44588946的博客
04-29 1823
滚动条滚到底部触发事件 这里的是滚动条滚到底部触发事件，而不是滚动条在底部再滚动触发事件 Jquery代码： $('.scroll').scroll(function (e) { if (isScrollBottom(this)) { // 滚动到底端了 加载内容 //加载数据 appendloading("related"); } else { // 没有滚动到底端 其他处理...
html 滚动条自动最底,让DIV的滚动条自动滚动到最底部 - 4种方法
weixin_33806343的博客
05-31 7719
要制作一个在线聊天的程序，在做最后的修饰时，需要对获得的信息即时滚动以保证用户总能看到最新消息。聊天程序是基于AJAX设计的，没有用框架，消息容器是一个DIV，所以问题就在于如何控制DIV的滚动条。网上有资料介绍说通过设置scrollTop属性来控制滚动条位置，具体可参见：http://hi.baidu.com/chen1345789/blog/item/de727bfb45587b176d22e...
html下拉条触发事件,css 滚动条滑动到底部时触发事件
weixin_39671621的博客
06-03 502
div: 当 滚动的距离+div的高度 == 文档的高度时，则滚动条以滑动到底部。$(document).ready(function (){var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)var nScrollTop = 0; //滚动的距离var nDivHight = $("#div1").height(); //div高度$("#div1").sc...
HTML静态网页成品作业(HTML+CSS)—— 节日母亲节介绍网页(5个页面)
最新发布
weixin_42283461的博客
06-07 224
HTML静态网页成品作业(HTML+CSS)—— 节日母亲节介绍网页(5个页面)
交互式流程图组件DHTMLX Diagram v6.0 - 拥有更灵活的高度可定制功能
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
06-04 426
本文将为大家介绍交互式流程图组件DHTMLX Diagram v6.0发布的一些新功能，欢迎下载最新版体验！
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、付费专栏及课程。

余额充值