启用浏览器滚动条工作

enable browser scrollbar working

本文关键字：工作 滚动条 浏览器 启用      更新时间：2023-09-26

>我有如下所示的html

<html>
<head>
<style>
#parent {
	position : absolute;
	width : 500px;
	height : 500px;
}
#top {
	position : absolute;
	width : 100%;
	height: 100%;
	z-index : 5;
}
#bottom {
	position : absolute;
	width : 100%;
	height : 100%;
	overflow :auto ;
	z-index : -1;
}
</style>
</head>
<body>
	<div id="parent">
		<div id="top"></div>
		<iframe id="bottom" src="https://www.baidu.com"></div>
	</div>
</body>
</html>

滚动条将在"底部"溢出时显示。

由于底部div 位于顶部div 下，因此滚动不起作用。

我的目标是鼠标不能直接点击"底部"div中的任何元素，而是可以使用鼠标滚轮和拖动滚动条来实现"底部"滚动。

不要使用 z-index 如果您只想使整个div 不可点击，请删除这些z-index并pointer-events: none添加到您的底部div。

喜欢：

<div id="parent">
    <div id="top">I don't know what's the use of this</div>
    <div id="bottom" style="overflow:auto; pointer-events: none;"></div>
</div>

替换溢出：隐藏;还要在父div 中添加 style="overflow：hidden;"。

相关文章：