animation-ref.html (935B)
1 <!DOCTYPE html> 2 <title>Reference for Web Animation 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 #scroller { 20 overflow: auto; 21 height: 100px; 22 width: 100px; 23 will-change: transform; /* force compositing */ 24 } 25 26 #contents { 27 height: 1000px; 28 width: 100%; 29 } 30 </style> 31 32 <div id="box"></div> 33 <div id="covered"></div> 34 <div id="scroller"> 35 <div id="contents"></div> 36 </div> 37 38 <script> 39 window.addEventListener('load', function() { 40 // Move the scroller to halfway. 41 const scroller = document.getElementById("scroller"); 42 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 43 scroller.scrollTop = 0.5 * maxScroll; 44 }); 45 </script>