Créer un scroll de div en div

**clemy53** · 10/10/2018, 21h08

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 !

**SpaceFrog** · 11/10/2018, 10h32

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.

**NoSmoking** · 11/10/2018, 11h03

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.

**SpaceFrog** · 11/10/2018, 11h17

NoSMo ... Tu sais bien que la MOA exige toujours des comportements qui vont à l'encontre des ergonomies standard...

**Archimède** · 28/10/2018, 23h09

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...

**Archimède** · 29/10/2018, 10h03

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>

**Archimède** · 29/10/2018, 11h13

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.

**Archimède** · 29/10/2018, 14h59

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

Créer un scroll de div en div

JavaScript

Discussions similaires

Partager

Partager