Discussion :

[boutmos]

Bonjour,

Encore moi

J'en viens a vous pour essayer de mettre en place un scrolling vertical avec JQuery.

J'en ai crée un horizontal sans trop de soucis mais en ce qui concerne le vertical je pense que ma méthode horizontal n'est pas très adaptée.

Pour le horizontal, je jous avec les bordures tout simplement.

Pour le vertical montant , çà marche presque : j'augmente la bordure top avec une valeure negative et j'augmente le height de la div d'autant, ce qui fait que ce qui etait en overflow:hidden passe en visible.

Mais pour l'inverse, c'est une autre histoire.

Peut on realiser un effet de scrolling sans forcement jouer sur les border ?

Pour avoir l'apercu, cliquez sur une image dans le bandeau :
>>> click me <<<

[boutmos]

j'ai trouvé. De plus la méthode est bcp plus simple : scrollTop

Pour faire monter le contenu caché de la DIV :

Code :

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

1
2
3
4
5
6
 
$("#bottomBox").bind("click", function(e){
	$("#middleBox").stop().animate({
		scrollTop: "+=50px"
	},500);
});

Pour faire descendre le contenu caché de la DIV :

Code :

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

1
2
3
4
5
6
 
$("#topBox").bind("click", function(e){
	$("#middleBox").stop().animate({
		scrollTop: "-=50px"
	},500);
});

De plus quand il arrive en fin de contenu de cette DIV, le scrollTop n'agit plus et donc pas besoin de calculer les tailles de div pour éviter les scrolls sur zone sans contenu (probleme que j'aurais rencontré avec les marges).

[boutmos]

Es il possible de connaitre le scrollTop maximum ?

[boutmos]

Bon bah comme j'aime bien me repondre a moi même, voici la solution :

memoriser la position actuelle puis Incrementer le scrolltop jusqu'a ce que celle ci soit egale a la position actuelle :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
scrollTopMax = 1;
scrollTopPas = 0;
lastScrollTop = 0;
 
while ( scrollTopMax > lastScrollTop ) {
	scrollTopPas+= 30;
	lastScrollTop = $("#projectDescription").scrollTop();
	$("#projectDescription").scrollTop(scrollTopPas);
	scrollTopMax = $("#projectDescription").scrollTop();
}
 
alert('scrollTopMax = '+scrollTopMax);

[danielhagnoul]

Bonsoir.

Plus simplement en demandant un scroll gigantesque et en prenant le scroll réel :

Code :

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

alert($("#testID").scrollTop(1000000).scrollTop());

[boutmos]

Oui j'avais aussi le choix entre ma méthode et celle ci, je n'aime pas trop le coté "bricolage" de celle ci même si , je l'avoue, fonctionne très bien.

Sinon je me suis aperçu d'un probleme de placement d'un element sous IE8.

lorsque je fixe les opacité de mes fleches Haut et Bas, j'ai la flèche du bas qui se retrouve decallée a droite (alors qu'elle apparait au bon endroit si je ne touche pas a son opacité). De plus çà fait buger l'animation de retour.

Code :

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

$("#upArrow, #downArrow").stop().animate({opacity: 0});

Ce problème n'est lié qu'a IE8. tous les autre browser fonctionnent sans aucun soucis.