anchor-scroll-chained-004-ref.html (1002B)
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,#scroller3 { 19 overflow: scroll; 20 } 21 22 #anchor1 { 23 height: 20px; 24 background: orange; 25 } 26 27 #anchor2 { 28 height: 20px; 29 background: cyan; 30 } 31 32 #anchored1 { 33 position: absolute; 34 top: 70px; 35 background: green; 36 } 37 38 #anchored2 { 39 position: absolute; 40 top: 120px; 41 background: lime; 42 } 43 </style> 44 45 <div id="scroller1"> 46 <div style="height: 100px"></div> 47 <div id="scroller2"> 48 <div style="height: 230px"></div> 49 <div id="anchor1"></div> 50 <div style="height: 230px"></div> 51 </div> 52 <div style="height: 100px"></div> 53 </div> 54 <div id="anchored1"> 55 <div id="scroller3"> 56 <div style="height: 230px"></div> 57 <div id="anchor2"></div> 58 <div style="height: 230px"></div> 59 </div> 60 </div> 61 <div id="anchored2"></div> 62 63 <script> 64 scroller1.scrollTop = 80; 65 scroller2.scrollTop = 200; 66 scroller3.scrollTop = 200; 67 </script>