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