Faire scroller la barre défilante quand on est sur un div créé [Résolu]

kelaan · 14/01/2011, 16h37

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 = "&nbsp;";
		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">&nbsp;</div></div>
</body>
</html>

Merci d'avance.

NoSmoking · 14/01/2011, 23h12

Bonsoir,
si tu mets

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#viewport .row{
  position: fixed;  /* <- C'EST ICI QUE CA PEUT GENE */
  left: 0;
  height: 40px;
  background: silver;
}

il est normal que le DIV qui possède la class row ne sroll pas

kelaan · 17/01/2011, 09h13

Merci de m'avoir répondu.

Oui, je m'en doutais bien, seulement si je change la position, la barre de défilement n'est plus limité et ne se bloque plus à la fin de row ( barre grise )

NoSmoking · 17/01/2011, 18h31

il me semble nécessaire de bien préciser ton besoin, je dois admettre que je ne percute plus trop!

kelaan · 19/01/2011, 10h26

Ben en fait, je génère des divs appelé row dans mon div viewport, le soucis c'est qu'ils sont en fixed comme tu dit, donc la scrollbarre ne défile pas dessus. Mais c'est un soucis également quand je le passe en absolute car là je sais défiler la scrollbarre mais également je sais la défiler quand il n'y a plus de div row ( en gros que l'espace est blanc ), ce que je ne faisais pas avec la position fixed, ce qui est logique car ça suit la scrollbarre. Mais j'aurais besoin d'un défilement sur les divs row sans pour autant que ce défilement continuer à défiler lorsqu'il n'y a plus de div row. C'est compréhensible ce que j'ai dit?

Désolé si j'ai du mal à m'expliquer.

NoSmoking · 24/01/2011, 20h26

en mettant de l'ordre dans mes mails je reviens ici...

Citation:

Envoyé par kelaan;

Mais j'aurais besoin d'un défilement sur les divs row sans pour autant que ce défilement continuer à défiler lorsqu'il n'y a plus de div row. C'est compréhensible ce que j'ai dit?

Désolé si j'ai du mal à m'expliquer.

je ne crois pas avoir mieux compris.

J'amorce quand même une réponse
tu fixes ta DIV viewport à la hauteur que tu souhaites et tu ajoutes le nombre de DIV désirées en les mettant en position absolute.

Il ne faut pas redéfinir la hauteur de la DIV viewport pour que le scroll stoppe sur la dernière DIV insérée.

Quant à la DIV scrollmaker, je ne saisi pas l'utilité.

Du coup pas sûr que je sois plus clair que toi!

17/01/2011, 09h13	#3
kelaan Invité de passage Inscription : mai 2010 Messages : 19 Détails du profil Informations forums : Inscription : mai 2010 Messages : 19 Points : 3 Points : 3	Merci de m'avoir répondu. Oui, je m'en doutais bien, seulement si je change la position, la barre de défilement n'est plus limité et ne se bloque plus à la fin de row ( barre grise )
	00

17/01/2011, 18h31	#4
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 930 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 930 Points : 4 750 Points : 4 750	il me semble nécessaire de bien préciser ton besoin, je dois admettre que je ne percute plus trop!
	00

19/01/2011, 10h26	#5
kelaan Invité de passage Inscription : mai 2010 Messages : 19 Détails du profil Informations forums : Inscription : mai 2010 Messages : 19 Points : 3 Points : 3	Ben en fait, je génère des divs appelé row dans mon div viewport, le soucis c'est qu'ils sont en fixed comme tu dit, donc la scrollbarre ne défile pas dessus. Mais c'est un soucis également quand je le passe en absolute car là je sais défiler la scrollbarre mais également je sais la défiler quand il n'y a plus de div row ( en gros que l'espace est blanc ), ce que je ne faisais pas avec la position fixed, ce qui est logique car ça suit la scrollbarre. Mais j'aurais besoin d'un défilement sur les divs row sans pour autant que ce défilement continuer à défiler lorsqu'il n'y a plus de div row. C'est compréhensible ce que j'ai dit? Désolé si j'ai du mal à m'expliquer.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email