Créer un scroll de div en div

Version imprimable

10/10/2018, 21h08
clemy53

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 !
11/10/2018, 10h32
SpaceFrog

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.
11/10/2018, 11h03
NoSmoking

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.
11/10/2018, 11h17
SpaceFrog

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

Tu peux tenter un truc de ce genre là...

Code:

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

Version corrigée avec le e.preventDefault qui manquait... + des tableaux qui devenaient évidents (testé sous IE11, ff et chrome)

Code:

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>

29/10/2018, 11h13
Archimède

Sous Edge, évidemment, ça ne fonctionne pas. C'est scrollTop

Code:

console.log(doc.scrollTop);

dans mouseWheelHandler m'indique 0....
Si vous avez la parade...

Rq: e.deltaY est fonctionnel.

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:

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