Scroll horizontal : caler un élément en x=0 au scrollLeft
Bonjour,
Suite à la discussion résolue ci-dessous:
http://www.developpez.net/forums/d13...t/#post7556194
J'aurais encore bien besoin de vos lumières.
Je sais maintenant comment faire scroller horizontalement avec un bouton (#innerD) un bandeau (#div1) d'images de largeurs différentes de la valeur de la window.innerWidth, mais un détail me gêne: après le scroll, on se retrouve avec des images tronquées en bordures gauche et droite de fenêtre.
J'essaye donc d'ajouter à mon bouton de scroll une fonction qui demande, lorsqu'une image est visible dans la fenêtre ET que son extrémité gauche est cachée en x négatif, de la recaler en x=0.
Le résultat souhaité est donc, à chaque scroll, que la première image visible à gauche soit entièrement visible.
J'ai regardé les spécification jquery sur :
http://api.jquery.com/scrollLeft et http://api.jquery.com/visible-selector
Mais il doit tout de même y avoir un pb de syntaxe dans ma fonction :
Code:
1
2
3
4
5
6
7
8
9
10
11
| $(document).ready(function (){
$("#innerD").click(function (){
$('html, body').animate({
scrollLeft: '+='+window.innerWidth // va à droite de la valeur du viewport//
}, 1000);
if($("#div1 img:visible") && $("#div1 img").scrollLeft()<0){ // censé caler le bord gauche de l'image de gauche contre la gauche du viewport si elle est coupée
$("#div1 img").scrollLeft(0)
}
return false;
});
}); |
Parce que ça ne marche pas : ça scroll de la largeur de la fenêtre, mais l'image de gauche ne se cale pas comme il faut.
Encore un guillemet mal placé, ou bien ?…
