position-sticky-writing-modes-ref.html (1331B)
1 <!DOCTYPE html> 2 <title>Reference for position:sticky constraints are independent of writing mode</title> 3 4 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 5 <style> 6 .group { 7 display: inline-block; 8 position: relative; 9 width: 180px; 10 height: 250px; 11 } 12 13 .scroller { 14 position: relative; 15 width: 130px; 16 height: 200px; 17 overflow: hidden; 18 font: 30px/1 Ahem; 19 } 20 21 .contents { 22 height: 500px; 23 width: 200px; 24 } 25 26 .indicator { 27 display: inline; 28 color: green; 29 position: relative; 30 } 31 </style> 32 33 <script> 34 window.addEventListener('load', function() { 35 document.getElementById('scroller1').scrollTop = 50; 36 document.getElementById('scroller1').scrollLeft = 20; 37 document.getElementById('scroller2').scrollTop = 50; 38 document.getElementById('scroller2').scrollLeft = -25; 39 }); 40 </script> 41 42 <div>You should see two green blocks below. No red or blue should be visible.</div> 43 44 <div class="group"> 45 <div id="scroller1" class="scroller" style="writing-mode: vertical-lr;"> 46 <div class="contents"> 47 <div class="indicator" style="left: 40px; top: 100px;">XXX</div> 48 </div> 49 </div> 50 </div> 51 52 <div class="group"> 53 <div id="scroller2" class="scroller" style="writing-mode: vertical-rl;"> 54 <div class="contents"> 55 <div class="indicator" style="right: 45px; top: 100px;">XXX</div> 56 </div> 57 </div> 58 </div>