range-boundary-ref.html (1338B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title></title> 7 </head> 8 <style type="text/css"> 9 .scroller { 10 display: inline-block; 11 border: 2px solid black; 12 height: 100px; 13 width: 100px; 14 overflow: hidden; 15 } 16 .box { 17 background: gray; 18 height: 50px; 19 width: 50px; 20 margin: 0; 21 } 22 .half-shift { 23 transform: translateX(25px); 24 } 25 .full-shift { 26 transform: translateX(50px); 27 } 28 .blue { 29 background-color: #99f; 30 } 31 .green { 32 background-color: #9f9; 33 } 34 </style> 35 <body> 36 <div id="scroller-1" class="scroller"> 37 <div class="box green"></div> 38 <div class="box blue full-shift"></div> 39 </div> 40 <div id="scroller-2" class="scroller"> 41 <div class="box"></div> 42 <div class="box blue"></div> 43 </div> 44 <br> 45 <div id="scroller-3" class="scroller"> 46 <div class="box"></div> 47 <div class="box blue"></div> 48 </div> 49 <div id="scroller-4" class="scroller"> 50 <div class="box"></div> 51 <div class="box green"></div> 52 </div> 53 <br> 54 <div id="scroller-5" class="scroller"> 55 <div class="box blue"></div> 56 <div class="box half-shift green"></div> 57 </div> 58 <div id="scroller-6" class="scroller"> 59 <div class="box"></div> 60 <div class="box green"></div> 61 </div> 62 </body> 63 </html>