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

最新推荐文章于 2025-06-04 11:34:27 发布

原创最新推荐文章于 2025-06-04 11:34:27 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

js 专栏收录该内容

36 篇文章

订阅专栏

该博客讨论了如何在CSS中设置div的overflow属性来实现页面滚动，并通过JavaScript监听滚动事件。内容详细解释了为何要使内容超出div的固定宽高以及如何正确监听div的滚动行为。示例代码展示了一个包含长列表的div，当滚动时会触发事件监听器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>