javascript向下滚动触发事件 demo

最新推荐文章于 2023-08-18 13:57:49 发布

原创最新推荐文章于 2023-08-18 13:57:49 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	
<body onscroll="my()"  style="width: 900px;height: 19000px;">
	<script type="text/javascript">
		/*demo描述:
		 主体body添加鼠标事件onscroll,
		 触发my()函数;
		 scrollTop高度卷入值,重顶部开始,
		 if判断scrollTop条件执行输出顶端卷入
		 */
		
		function my(){

		var scrollTop = window.pageYOffset  
                || document.documentElement.scrollTop  
                || document.body.scrollTop  
                || 0;
                
             if(scrollTop>100){document.getElementById("demo").innerHTML=scrollTop};
		}
	</script>
<span style="position: fixed;left: 50%;top:50%;margin-left:-50px ;margin-top:-50px;display: block; width: 100px;height: 100px;background-color: orange;text-align: center;line-height: 100px;font-family: '微软雅黑','agency fb';font-size: 2em;font-weight: bold;color: white;" id="demo">222</span>
</body >
</body>
</html>