CSS & JS 关于设置 overflow: auto；元素无法监听滚动问题

最新推荐文章于 2024-07-30 11:44:55 发布

cookcyq

最新推荐文章于 2024-07-30 11:44:55 发布

阅读量1.2k

点赞数

分类专栏： CSS JavaScript 文章标签： css3 前端

本文链接：https://blog.csdn.net/cookcyq__/article/details/121845480

版权

JavaScript 同时被 2 个专栏收录

30 篇文章 4 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

是否是 height:100% 搞的鬼

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<style type="text/css">
		#box{
			height: 100%;
			overflow: auto;
		}
		h1{
			height: 100px;
		}
	</style>
</head>
<body>
<div id="box">
	<h1>1</h1>
	<h1>2</h1>
	<h1>3</h1>
	<h1>4</h1>
	<h1>5</h1>
	<h1>6</h1>
	<h1>7</h1>
	<h1>8</h1>
	<h1>9</h1>
	<h1>10</h1>
	<h1>11</h1>
	<h1>12</h1>
	<h1>13</h1>
	<h1>14</h1>
	<h1>15</h1>
	<h1>16</h1>
	<h1>17</h1>
	<h1>18</h1>
	<h1>19</h1>
	<h1>20</h1>
</div>
</body>
<script type="text/javascript">
	const handleScroll = (e) => {
		console.log(e.target)
	}
	(() =>　{
		const box = document.getElementById('box')
		box.addEventListener('scroll', handleScroll)
	})()
</script>
</html>

效果图
在这里插入图片描述

你会看到怎么滚动都不会触发滚动事件，这是因为 #box 的 height:100% 是继承上一级元素的 100%，本案例中 100% 的继承关系为：box -> body -> html
而 html 的默认高度是由内容累加的，而每个 h1 的高度是 100px，20 个 h1 就等于 2000px，此时的 #box 高度 height: 100%; 就等于 height: 2000px;
这就是为什么设置 overflow:auto; 无效的原因，解决方案也很简单，给 height 设置一个固定高度，如：height: 100vh; or height: 100 px;