scroll-timeline-default-writing-mode-rl-ref.html (728B)
1 <!DOCTYPE html> 2 <title>Reference for default scroll() timeline with vertical-rl</title> 3 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 4 <style> 5 html { 6 min-block-size: 100%; 7 padding-block-end: 100px; 8 writing-mode: vertical-rl 9 } 10 11 #box { 12 width: 100px; 13 height: 100px; 14 background-color: green; 15 transform: translateX(-100px); 16 } 17 18 * { 19 margin-block: 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>