Question

我有html如下

＆＃13;

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

＆＃13;

并且滚动条将显示＆＃34; bottom＆＃34;溢出。

由于底部div位于顶部div之下，因此滚动无效。

我的目标是鼠标无法直接点击＆＃34;底部＆＃34; div，但可以使用鼠标滚轮和拖动滚动条实现＆＃34; bottom＆＃34;滚动。

Answer 1

如果您只想让整个div无法点击，请不要使用z-index，删除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>

Answer 2

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

启用浏览器滚动条工作

2 个答案: