direction-rtl.html (924B)
1 <!DOCTYPE html> 2 <title> 3 Scrollers should snap to the closest snap point on initial layout (using 'direction: rtl') 4 </title> 5 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> 6 <link rel="match" href="snap-after-initial-layout-ref.html" /> 7 <style> 8 div { 9 position: absolute; 10 margin: 0; 11 } 12 13 #scroller { 14 height: 500px; 15 width: 500px; 16 overflow: hidden; 17 scroll-snap-type: both mandatory; 18 direction: rtl; 19 } 20 21 #close-target { 22 width: 200px; 23 height: 200px; 24 border: solid green 50px; 25 top: 50px; 26 right: 150px; 27 margin: 50px; 28 background-color: green; 29 scroll-snap-align: start; 30 } 31 32 #far-target { 33 width: 300px; 34 height: 300px; 35 top: 100px; 36 right: 700px; 37 background-color: red; 38 scroll-snap-align: start; 39 } 40 41 .area { 42 width: 2000px; 43 height: 2000px; 44 } 45 </style> 46 47 <div id="scroller"> 48 <div class="area"></div> 49 <div id="close-target"></div> 50 <div id="far-target"></div> 51 </div>