animation-with-root-scroller-ref.html (837B)
1 <!DOCTYPE html> 2 <title>Reference for Scroll timeline with Web Animation using the root scroller</title> 3 <style> 4 html { 5 min-height: 100%; 6 min-width: 100%; 7 padding-bottom: 100px; 8 padding-right: 100px; 9 } 10 11 #box { 12 width: 100px; 13 height: 100px; 14 background-color: green; 15 transform: translate(0, 100px); 16 opacity: 0.5; 17 will-change: transform; /* force compositing */ 18 } 19 20 #covered { 21 width: 100px; 22 height: 100px; 23 background-color: red; 24 } 25 </style> 26 27 <div id="box"></div> 28 <div id="covered"><p>Covered Contents</p></div> 29 30 <script> 31 window.addEventListener('load', function() { 32 // Move the scroller to halfway. 33 const scroller = document.scrollingElement; 34 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 35 scroller.scrollTop = 0.5 * maxScroll; 36 }); 37 </script>