933264-1.html (1992B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>The Grid in an overflowing div</title> 5 <style type="text/css"> 6 html { 7 padding: 0; 8 border: 0; 9 margin: 0; 10 } 11 body { 12 padding: 0; 13 border: 0; 14 margin: 0; 15 } 16 table { 17 padding: 0; 18 margin: 0; 19 border-top: none; 20 border-left: none; 21 border-right: 1px solid black; 22 border-bottom: 1px solid black; 23 } 24 tr { 25 padding: 0; 26 border: 0; 27 margin: 0; 28 } 29 td { 30 /* top border counts as part of height, but 31 left border doesn't count as part of width. 32 go figure. 33 */ 34 min-height: 99px; 35 height: 99px; 36 max-height: 99px; 37 min-width: 99px; 38 width: 99px; 39 max-width: 99px; 40 padding: 0; 41 border-left: 1px solid black; 42 border-top: 1px solid black; 43 border-right: none; 44 border-bottom: none; 45 margin: 0; 46 font-size: 12px; 47 text-align: left; 48 vertical-align: top; 49 font-family: monospace; 50 } 51 </style> 52 <script type="text/javascript"> 53 var val = 100; 54 var max = 1000; 55 function scrollmore() { 56 if (val == max) { 57 document.documentElement.removeAttribute('class'); 58 return; 59 } 60 var div = document.getElementById('nest'); 61 div.scrollLeft = val; 62 div.scrollTop = val; 63 val += 100; 64 document.documentElement.offsetLeft; 65 setTimeout(scrollmore, 500); 66 } 67 68 window.onload = scrollmore; 69 </script> 70 </head> 71 <body> 72 <div style="color: red">this text is above the scrolling div. the div below is 300x400</div> 73 <div id="nest" style="overflow: scroll; height: 400px; width: 300px; border: solid 1px black"> 74 <div style="background: blue; width: 5000px; height: 5000px;">text</div> 75 </div> 76 <div style="color: red">this text is below the scrolling div</div> 77 </body> 78 </html>