anchor-scroll-chained-003-ref.html (789B)
1 <!DOCTYPE html> 2 <style> 3 body { 4 margin: 0; 5 } 6 7 div { 8 width: 100px; 9 height: 100px; 10 } 11 12 #scroller1 { 13 width: 200px; 14 height: 200px; 15 position: relative; 16 } 17 18 #scroller1,#scroller2 { 19 overflow: hidden; 20 } 21 22 #anchor { 23 height: 20px; 24 background: orange; 25 } 26 27 #anchored1 { 28 position: absolute; 29 top: 70px; 30 background: green; 31 z-index: 1; 32 } 33 34 #anchored2 { 35 position: absolute; 36 top: 170px; 37 background: lime; 38 } 39 40 </style> 41 42 <div id="anchored2"></div> 43 <div id="anchored1"></div> 44 <div id="scroller1"> 45 <div style="height: 100px"></div> 46 <div id="scroller2"> 47 <div style="height: 230px"></div> 48 <div id="anchor"></div> 49 <div style="height: 230px"></div> 50 </div> 51 <div style="height: 100px"></div> 52 </div> 53 54 <script> 55 scroller1.scrollTop = 80; 56 scroller2.scrollTop = 200; 57 </script>