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