| <!DOCTYPE html> |
| <style> |
| [id^="target"] { |
| width: 60px; |
| height: 40px; |
| margin: 10px; |
| background: rgb(160, 0, 0); |
| } |
| </style> |
| <div id="target1"></div> |
| <div id="target2"></div> |
| <div style="width: 150px; height: 150px; background: yellow"> |
| <div id="target3" style="position: relative; top: 70px; left: 30px"></div> |
| </div> |
| <div id="scroller" style="will-change: transform; width: 150px; height: 150px; overflow: scroll"> |
| <div style="width: 4000px; height: 20000px"></div> |
| <div id="target4" style="position: relative; top: -10000px; left: 30px"></div> |
| </div> |
| <script> |
| onload = function() { |
| scroller.scrollTop = 9950; |
| scroller.scrollLeft = 50; |
| }; |
| </script> |
