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