Below is the HTML code snippet:
<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>The scrollbar will appear when the content in "bottom" overflows.
However, scrolling doesn't work as the "bottom" div is below the "top" div.
My objective is to prevent direct mouse click on elements in the "bottom" div, but still allow scrolling by using the mouse wheel or dragging the scrollbar.