| <!DOCTYPE html> |
| |
| <!-- |
| The scrollbar within the inner (blue) box should be visible and positioned at |
| the top, even though the outer (green) box has been scrolled. |
| --> |
| |
| <style> |
| html, body { margin: 0; padding: 0; } |
| #outer { |
| width: 400px; |
| height: 300px; |
| overflow-y: scroll; |
| border: 1px solid green; |
| } |
| #inner { |
| width: 100px; |
| height: 100px; |
| overflow-y: scroll; |
| border: 1px solid blue; |
| } |
| .strut { height: 500px; } |
| </style> |
| |
| <div id="outer"> |
| <div class="strut"></div> |
| <div id="inner"> |
| <div class="strut"></div> |
| </div> |
| </div> |
| |
| <script> |
| if (window.internals) { |
| internals.settings.setOverlayScrollbarsEnabled(true); |
| internals.settings.setMockScrollbarsEnabled(true); |
| } |
| const outer = document.getElementById('outer'); |
| outer.scrollTop = outer.scrollHeight - outer.clientHeight; |
| </script> |
