Faire scroller la barre défilante quand on est sur un div créé
Bonjour, petit soucis sur ce script,
en effet, la barre de défilement défile quand on est dessus ou quand on est sur l'arrière plan mais quand on est sur la div, elle défile plus.
Auriez vous une idée? Une piste?
Voici le code:
Code:
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
79
80
81
82
83
84
85
86
87
88
89
90
91
| <html>
<head>
<title>test blm</title>
<style type="text/css">
body
{
margin: 0;
overflow: hidden;
}
#viewport
{
position: absolute;
left: 0;
top: 0;
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
}
#scrollmaker
{
position: absolute;
left: -200%;
top: 0;
width: 100%;
overflow: hidden;
}
#viewport .row
{
position: fixed;
left: 0;
height: 40px;
background: silver;
}
</style>
<script type="text/javascript">
var viewport, scrollmaker;
var rowHeight = 50;
var rowCount = 0;
function updateDataRowCount(count)
{
scrollmaker.style.height = (count * rowHeight) + "px";
}
function updateViewportRowCount()
{
var newRowCount = parseInt(document.body.clientHeight / rowHeight);
while (rowCount > newRowCount) {
viewport.removeChild(viewport.lastChild);
--rowCount;
}
while (rowCount < newRowCount) {
var row = document.createElement("div");
row.className = "row";
row.id = "row" + rowCount;
row.style.top = (rowCount * rowHeight) + "px";
row.innerHTML = " ";
viewport.appendChild(row);
++rowCount;
}
viewport.style.height = (rowCount * rowHeight) + "px";
for (var row = viewport.firstChild; row != null; row = row.nextSibling) {
if (row.className == "row")
row.style.width = scrollmaker.offsetWidth;
}
}
window.onload = function () {
viewport = document.getElementById("viewport");
scrollmaker = document.getElementById("scrollmaker");
updateViewportRowCount();
updateDataRowCount(100);
}
window.onresize = updateViewportRowCount;
</script>
</head>
<body>
<div id="viewport"><div id="scrollmaker"> </div></div>
</body>
</html> |
Merci d'avance.
