Discussion :

[eddynamique]

Bonjour à tous,

Je travaille actuellement sur un site parallax et je rencontre la problématique suivante :
Mon client aimerait que lorsqu'on arrive sur une section du site (au milieu de la home page en parallax), le scroll soit bloqué verticalement et que des éléments défilent horizontalement (vitesse de défilement contrôlée par le scroll). Une fois tous que tous les éléments ont défilé horizontalement, le scroll est vertical est réactivé pour passer aux sections suivantes.
J'espère être suffisamment clair...

Pour le scroll horizontal, je connais le plugin jQuery jInvertScroll qui correspond à mon besoin, mais malheureusement tous les éléments à faire défiler horizontalement doivent être fixe (position:fixed), il est donc assez difficile de l'utiliser au milieu d'une page..

Avez-vous des idées pour me passer un coup de main (astuces, techno, etc...) ?

Merci pour vos retour !

[SylvainPV]

tous les éléments à faire défiler horizontalement doivent être fixe (position:fixed)

Non ça n'a pas de sens, un élément en position:fixed ne défile pas par définition.

Il faut en JavaScript alterner entre une position absolute et une position fixed pour ton conteneur qui contient les éléments à défiler horizontalement, selon la position du scroll vertical actuel.
Quand il est en position absolue, il défile au scroll. Quand il est en fixed, il reste bloqué mais la page défile toujours.
En jQuery ça donnerait un truc de ce genre :

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
// on va dire que le défilement horizontal a lieu entre 1000px < scrollTop < 2000px// cela implique que #horizontalSliderContainer soit contenu dans un élément de 1000px de haut
// pour laisser l'espace vide nécessaire
 
var hContainer = $("#horizontalSliderContainer");
hContainer.parent().css("height", "1000px");
 
 
$(window).scroll(function(){
    var scrollTop = $(window).scrollTop();    
 
    if(scrollTop >= 1000 && scrollTop < 2000){
        if(hContainer.css("position") !== "fixed"){
            hContainer.css({
                "position": "fixed",
                "top": 0
            });
        }
        // on suppose ici que l'espace total de défilement horizontal fait 1000px; sinon il faut appliquer un coefficient
        hContainer.css("transform","translateX(-" + (scrollTop - 1000) + "px)");
    } else if(hContainer.css("position") === "fixed"){
        hContainer.css({
            "position": "absolute",
            "top": scrollTop < 1000 ? 1000 : 2000
        });
    }
});

J'ai une démo fonctionnelle ici :

http://jsbin.com/livofesaxipa/1/edit?html,css,js,output

[eddynamique]

Merci pour les explications, j'y vois un peu plus clair sur le fonctionnement du défilement horizontal.
Et merci beaucoup pour la démo, ça correspond bien à mon besoin, je devrais pouvoir m'en tirer avec ça !

Bonne journée !