scroll-timeline-specified-scroller-ref.html (819B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Reference for scroll timeline with a specified scroller</title> 4 <style> 5 #scroller { 6 overflow: scroll; 7 width: 100px; 8 height: 100px; 9 scrollbar-width: none; 10 } 11 12 #contents { 13 height: 200px; 14 } 15 16 #box { 17 width: 100px; 18 height: 100px; 19 background-color: green; 20 transform: translateX(50px); 21 } 22 </style> 23 24 <div id="scroller"> 25 <div id="contents"></div> 26 <div id="box"></div> 27 </div> 28 29 <script> 30 window.addEventListener('load', function() { 31 const scroller = document.getElementById("scroller"); 32 // Move the scroller to the halfway point. 33 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 34 scroller.scrollTop = 0.5 * maxScroll; 35 36 document.documentElement.classList.remove("reftest-wait"); 37 }); 38 </script>