IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Créer un scroll de div en div


Sujet :

JavaScript

  1. #1
    Nouveau candidat au Club
    Femme Profil pro
    Étudiant
    Inscrit en
    Octobre 2018
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Mayenne (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Octobre 2018
    Messages : 1
    Par défaut Créer un scroll de div en div
    Bonjour,

    En gros, sur mon site one page, je voudrais faire en sorte que : dès que l'utilisateur scroll d'un cran, le site descende à la div d'en dessous / d'au dessus

    Evidemment j'ai cherché, il existe des tas de solution (fullpage.js etc) , mais à chaque fois c'est des div qui doivent prendre tout l'écran.
    Or, moi je souhaiterai exactement la même chose mais sans que les div prennent forcément tout l'écran, voici un exemple : https://alvarotrigo.com/fullPage/ext...-sections.html

    Comme on peut le voir, la première div prend tout l'écran, la deuxième seulement 80% et on voit au dessus et en dessous les autres div (je ne veux pas que ce soit du vide)

    Mais ça évidemment, c'est une extension payante. Donc j'aimerai savoir si il existe des alternatives ou un moyen de le faire à la main (je suis débutant)

    Merci !

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    Avec un système d'ancre sur chacun de tes divs et un calcul qui prend en compte le scrollTop courant et le scrollTop du prochain div en captant le sens de scroll de la molette.
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Bonjour,
    le plus « simple » m'apparaît comme étant la gestion de l'événement WheelEvent.

    Perso j'aime bien que l'on ne m'impose pas de contrainte au scroll.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    NoSMo ... Tu sais bien que la MOA exige toujours des comportements qui vont à l'encontre des ergonomies standard...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre Expert
    Avatar de Archimède
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2005
    Messages
    1 644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 59
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 644
    Par défaut
    Tu peux tenter un truc de ce genre là...
    Code html : 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
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style>
             body{
              background-color: #1C1E2B;
              }
              
              div{
                position: absolute;
                left: 0;
                width:100%;
                font-size: 3em;
                text-align: center;
              }
              
             #div1{
                top: 20px;
                height:400px;
                background-color: red;
            }
            
            #div2{
                top: 440px;
                height:400px;
                background-color:#00ff00;
            }
            
           #div3{
               top: 860px;
               height:1000px;
               background-color: blue;
            }
        </style>
    </head>
    <body>
     <div id="div1">div 1</div>
     <div id="div2">div 2</div>
     <div id="div3">div 3</div>
    <script>
      const nbDiv=3;//3 divs ici
      var numDiv=1;//numéro de la div
      var div1=document.getElementById("div1");
      var div2=document.getElementById("div2");
      var div3=document.getElementById("div3");
      
      var dy2=div2.offsetTop-div1.offsetTop;
      var dy3=div3.offsetTop-div1.offsetTop;
      
       window.addEventListener("wheel",mouseWheelHandler);
       
       function mouseWheelHandler(e){
          var delta=e.deltaY;
          var doc= document.documentElement /*Chrome, Firefox, IE and Opera*/|| document.body; //  Safari
          if (delta>0) numDiv++; else  numDiv--;
          if (numDiv<1) numDiv=1;
          if (numDiv>nbDiv) numDiv=nbDiv;
          
          switch (numDiv){
            case 1:
             doc.scrollTop=0;
            break;
            case 2:
              doc.scrollTop=dy2;
            break;
            case 3:
              doc.scrollTop=dy3;
            break;
          }
       }
    </script>
    </body>
    </html>

    A toi de mieux gérer les conditions, ce n'est pas très propre. Il est tard et je n'arrive plus trop à réfléchir...

  6. #6
    Membre Expert
    Avatar de Archimède
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2005
    Messages
    1 644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 59
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 644
    Par défaut
    Version corrigée avec le e.preventDefault qui manquait... + des tableaux qui devenaient évidents (testé sous IE11, ff et chrome)
    Code html : 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
     
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style>
             body{
              background-color: #1C1E2B;
              }
              
              div{
                position: absolute;
                left: 0;
                width:100%;
                font-size: 3em;
                text-align: center;
              }
              
             #div1{
                top: 20px;
                height:400px;
                background-color: red;
            }
            
            #div2{
                top: 440px;
                height:400px;
                background-color:#00ff00;
            }
            
           #div3{
               top: 860px;
               height:1000px;
               background-color: blue;
            }
            
            #div4{
               top: 1880px;
               height:1000px;
               background-color: yellow;
            }
        </style>
    </head>
    <body>
     <div id="div1">div 1</div>
     <div id="div2">div 2</div>
     <div id="div3">div 3</div>
     <div id="div4">div 4</div>
    <script>
      var numDiv=1;//numéro de la div
      var div=[document.getElementById("div1"),document.getElementById("div2"),document.getElementById("div3"),document.getElementById("div4")];
      
      var dy=[];
      dy[1]=0;
     
      for (var i=2;i<=div.length;i++) dy[i]=div[i-1].offsetTop-div[0].offsetTop;
     
       window.addEventListener("wheel", mouseWheelHandler);
       
       function mouseWheelHandler(e){
          e.preventDefault();
          var delta=e.deltaY;
     
          var doc= document.documentElement /*Chrome, Firefox, IE and Opera*/|| document.body; //  Safari
          if (delta>0) numDiv++; else  numDiv--;
          if (numDiv<1) numDiv=1;
          if (numDiv>div.length) numDiv=div.length;
          
          for(var j=1;j<=div.length;j++) if (numDiv==j) doc.scrollTop=dy[j];   
       }
    </script>
    </body>
    </html>

  7. #7
    Membre Expert
    Avatar de Archimède
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2005
    Messages
    1 644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 59
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 644
    Par défaut
    Sous Edge, évidemment, ça ne fonctionne pas. C'est scrollTop
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
      console.log(doc.scrollTop);
    dans mouseWheelHandler m'indique 0....
    Si vous avez la parade...

    Rq: e.deltaY est fonctionnel.

  8. #8
    Membre Expert
    Avatar de Archimède
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2005
    Messages
    1 644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 59
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 644
    Par défaut
    En fait, ça venait de la déclaration de la variable doc avec l'opérateur logique "ou" qui ne me renvoyait pas document.body pour edge...
    Code html : 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
     
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style>
             body{
              background-color: #1C1E2B;
              overflow: hidden;
              }
              
              div{
                position: absolute;
                left: 0;
                width:100%;
                font-size: 3em;
                text-align: center;
              }
              
             #div1{
                top: 20px;
                height:400px;
                background-color: red;
            }
            
            #div2{
                top: 440px;
                height:400px;
                background-color:#00ff00;
            }
            
           #div3{
               top: 860px;
               height:1000px;
               background-color: blue;
            }
            
            #div4{
               top: 1880px;
               height:1000px;
               background-color: yellow;
            }
        </style>
    </head>
    <body>
     <div id="div1">div 1</div>
     <div id="div2">div 2</div>
     <div id="div3">div 3</div>
     <div id="div4">div 4</div>
    <script>
      var numDiv=1;//numéro de la div
      var div=[document.getElementById("div1"),document.getElementById("div2"),document.getElementById("div3"),document.getElementById("div4")];
      
      var dy=[];
      dy[1]=0;
     
      for (var i=2;i<=div.length;i++) dy[i]=div[i-1].offsetTop-div[0].offsetTop;
      window.addEventListener("wheel", mouseWheelHandler);
     
       function mouseWheelHandler(e){
         e.preventDefault();
         var delta=e.deltaY;
         var doc = document.body; // Safari, Edge
         var html = document.documentElement; // Chrome, Firefox, IE and Opera
          if (delta>0) numDiv++; else  numDiv--;
          if (numDiv<1) numDiv=1;
          if (numDiv>div.length) numDiv=div.length;
          
          for(var j=1;j<=div.length;j++) if (numDiv==j) html.scrollTop=doc.scrollTop=dy[j]; 
       }
    </script>
    </body>
    </html>

    Maintenant, c'est bon : testé sur IE11, ff, chrome et Edge

Discussions similaires

  1. Scroll automatique d'un div
    Par keisuke dans le forum Général JavaScript
    Réponses: 17
    Dernier message: 22/08/2006, 12h09
  2. scrolling dans une zone <div>
    Par Commodore dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 12/07/2006, 10h46
  3. Scrolling dans une zone <div>
    Par Commodore dans le forum Langage
    Réponses: 3
    Dernier message: 12/07/2006, 10h09
  4. [DIV][Scroll]Scroll horizontal dans un DIV
    Par Salam59 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 31/03/2006, 11h38
  5. [CSS] Créer un style en fonction du div parent
    Par titoumimi dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 28/02/2006, 09h33

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo