| <!DOCTYPE html> |
| <style> |
| #container { |
| width: 300px; |
| height: 300px; |
| border: 1px solid black; |
| overflow: scroll; |
| } |
| |
| #overlapper { |
| position: fixed; |
| background-color: red; |
| width: 50px; |
| height: 200px; |
| left: 20px; |
| top: 20px; |
| will-change: transform; |
| } |
| |
| #subcontainer { |
| height: 500px |
| } |
| |
| .child { |
| position: relative; |
| top: 5px; |
| left: 5px; |
| background-color: green; |
| height: 35px; |
| width: 35px; |
| margin: 50px; |
| } |
| |
| .grandchild { |
| position: relative; |
| top: 5px; |
| left: 5px; |
| background-color: blue; |
| height: 10px; |
| width: 10px; |
| } |
| </style> |
| |
| <div id="overlapper"></div> |
| <div id="container"> |
| <div id="subcontainer"> |
| <div class="child"> |
| <div class="grandchild"></div> |
| </div> |
| <div class="child"> |
| <div class="grandchild"></div> |
| </div> |
| </div> |
| </div> |
| <script> |
| // Scroll so that one of the grandchildren boxes is half clipped by the overflow:scroll div. |
| var container = document.getElementById("container"); |
| container.scrollTop = 65; |
| </script> |
