blob: c9e160c2abc5abb63ea5e3bc09322ce8048c57f8 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
.container {
position: relative;
z-index: 0;
margin: 50px;
width: 400px;
height: 320px;
overflow-y: scroll;
border: 30px solid gray;
box-shadow: 0 0 10px transparent;
padding: 20px;
}
.inner {
position: relative;
height: 1000px;
width: 100%;
background-color: silver;
}
.inner-fixed {
position: absolute;
top: 50px;
left: 100px;
width: 200px;
height: 150px;
background-color: green;
box-shadow: 0 0 10px transparent;
will-change: transform;
}
.placeholder {
position: absolute;
background-color: red;
top: 50px;
left: 100px;
width: 200px;
height: 148px;
}
.scrollbar-hider {
position: absolute;
height: 380px;
width: 37px;
top: 70px;
left: 484px;
background-color: black;
}
</style>
</head>
<body>
<div id="scroller" class="container">
<div class="inner">
&nbsp;
<div class="placeholder"></div>
<div class="inner-fixed"></div>
</div>
</div>
<div class="scrollbar-hider"></div>
</body>
</html>