当前位置：网站首页>div设置滚动和监听滚动距离

div设置滚动和监听滚动距离

2022-06-21 23:50:00 【kilito_01】 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			.box{
    
				width: 100vw;
                height: 100vw;
				/* 让div能被滚动事件监听到  需要让这个div设置overflow-y */
				/* 需要让内容超出div设定的固定的宽高 */
				/* 之前认为让内容超出div 页面也有滚动的效果，实际上撑开的是body而不是div
				   所以给window监听滚动事件是可以监听到的  给div监听不到是因为div并没有滚动
				   滚动的是body  
				*/
				overflow-y: auto;
			}
		</style>
	</head>
	<body>
	  <!-- 闭包应用 -->
        <div class="box">
        <ul>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>111</li>
			<li>222</li>
		</ul>
		</div>
		<script>
		      
			  document.querySelector('.box').addEventListener('scroll',(e)=>{
    
				// console.log('scroll',e);
				var ele = document.querySelector('.box')
				// 这个就是滚动的距离
				var top = ele.scrollTop  
	              
			  })
		
		</script>
	
	</body>
</html>
原网站

版权声明
本文为[kilito_01]所创，转载请带上原文链接，感谢
https://blog.csdn.net/kilito_01/article/details/125372611

边栏推荐

猜你喜欢

随机推荐