scroll-timeline-inline-orientation-ref.html (724B)
1 <!DOCTYPE html> 2 <title>Reference for scroll timeline with inline orientation and root scroller</title> 3 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 4 <style> 5 html { 6 min-width: 100%; 7 padding-right: 100px; 8 } 9 10 #box { 11 width: 100px; 12 height: 100px; 13 background-color: green; 14 transform: translateX(100px); 15 } 16 17 * { 18 margin-left: 0px; 19 margin-right: 0px; 20 } 21 </style> 22 23 <div id="box"></div> 24 25 <script> 26 window.addEventListener('load', function() { 27 // Move the scroller to halfway. 28 const scroller = document.scrollingElement; 29 const maxScroll = scroller.scrollWidth - scroller.clientWidth; 30 scroller.scrollLeft = 0.5 * maxScroll; 31 }); 32 </script>