CODEWITHSUNDEEP
javascripthtmlcss
alen
alen

Reputation: 149

enable browser scrollbar working

I have html like below

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

and the scrollbar will show when "bottom" is overflow.

Since bottom div is under top div, scrolling is not working.

My target is that mouse cannot directly click on any element in "bottom" div, but can use mouse wheel and drag scrollbar to achieve "bottom" scrolling.

Upvotes: 0

Views: 59

Answers (2)

Adrian
Adrian

Reputation: 1587

Don't use z-index if you just want to make the whole div unclickable, remove those z-indexs and add pointer-events: none to your bottom div.

Like:

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

Upvotes: 2

Suraj
Suraj

Reputation: 3137

Replace overflow: hidden; Also add style="overflow:hidden;" in the parent div.

Upvotes: 0

Related Questions