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 :
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.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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; }); });
Encore un guillemet mal placé, ou bien ?…
Partager