Faire un scroll dans une DIV

Version imprimable

Bonjour,
j'ai trouvé ce script dans la discussion : Créer un scroll de div en div

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

Très bon script.
J'aurai juste un problème.

Je n'arrive pas à le faire marcher lorsque le scroll se trouve dans un div à l'intérieur de ma page.
Je pense qu'il s'agit d'un réglage :

Code:

window.addEventListener("wheel", mouseWheelHandler);

Merci tout de même. Si je trouve je renvoie la réponse.

27/02/2020, 08h29
SpaceFrog

Citation:

lorsque le scroll se trouve dans un div à l'intérieur de ma page.

:koi:
on peut avoir un div à l'extérieur de la page ??
27/02/2020, 15h20
phoenix11

Lol. Désolé d'avoir voulu être si précis..
Effectivement, lorsque je veux mettre un overflow dans mon div, le code (cité plus haut) ne peut pas marcher.
Je continu à chercher...

Bonjour,

Citation:

Envoyé par NoSmoking

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

+1

Voir aussi : "scroll au clic"

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
<main>
  <section class="onepage" id="blue">
    <nav>
      <button class="up_btn" title="slide UP">↑</button>
      <button class="down_btn" title="slide DOWN">↓</button>
    </nav>
    <h2>Section 1</h2> 
    <article>
      blabla
    </article>
    <article>
      blabla
    </article>
  </section>
  <section class="onepage" id="green">
    <nav>
      <button class="up_btn" title="slide UP">↑</button>
      <button class="down_btn" title="slide DOWN">↓</button>
    </nav>
    <h2>Section 2</h2>
    <article>
      blabla
    </article>
    <article>
      blabla
    </article>
  </section>
  <section class="onepage" id="red">
    <nav>
      <button class="up_btn" title="slide UP">↑</button>
      <button class="down_btn" title="slide DOWN">↓</button>
    </nav>
    <h2>Section 3</h2>
    <article>
      blabla
    </article>
    <article>
      blabla
    </article>
  </section>
</main>

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
html, body { padding:0; margin:0; }
/* sections */
.onepage{
  position:relative;
  min-height: 100vh;
  padding:20px;
}
/* boutons */
.onepage > nav {
  position:absolute;
  top:5px; right:5px;
  z-index:1;
}
.onepage .up_btn,
.onepage .down_btn { 
  cursor:pointer;
  width:32px; height:32px;
  border-radius:20px;
}
.onepage:first-child .up_btn,
.onepage:last-child .down_btn { 
  visibility:hidden;
}
 
/* Déco */
#blue{ background-color: lightblue; }
#green{ background-color: lightgreen; }
#red{ background-color: salmon; }

AU CHOIX :
1- jQuery

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* SCROLL de section à section - jQuery */
$(document).ready(function(){
  $('html').on('click', '.down_btn', function(){
    if($(this).closest('.onepage').next().offset())
    {
      $('html').animate({scrollTop: $(this).closest('.onepage').next().offset().top});
    }
  });
  $('html').on('click', '.up_btn', function(){
    if($(this).closest('.onepage').prev().offset())
    {
      $('html').animate({scrollTop: $(this).closest('.onepage').prev().offset().top});
    }
  });
});

2- OU en JS vanilla :

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
/* SCROLL de section à section - JavaScript vanilla */
window.addEventListener("load",()=>{
  //  const sections = document.querySelectorAll(".onepage"),
  const html = document.querySelector("html");
  const up_btns = document.querySelectorAll(".up_btn");
  const down_btns = document.querySelectorAll(".down_btn");
  up_btns.forEach(function(up_btn){
    up_btn.addEventListener('click', function(){
      let section_prev = this.closest('.onepage').previousElementSibling; // section précédente
      window.scrollTo({
        top: section_prev.offsetTop,
        behavior: 'smooth',
      });
    });
  });
  down_btns.forEach(function(down_btn){
    down_btn.addEventListener('click', function(){
      let section_next = this.closest('.onepage').nextElementSibling; // section suivante
      window.scrollTo({
        top: section_next.offsetTop,
        behavior: 'smooth',
      });
    });
  });
});

une variante, qui simplifie la css et les "mesures"; le but est aussi d'être le plus libre possible avec la molette des qu'on sort des zones spéciales.

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
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>...</title>
 
<style>
.anonyme div {margin:auto;border:solid red 1px;width:300px;height:300px;}
#c div{margin:auto;border:solid black 1px;width:200px;height:500px;}
</style>
</head>
<body>
<div class="anonyme">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
 
<div id="c">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
 
<div class="anonyme">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
 
<script>
window.addEventListener("load",()=>{
// la collection de div qui nous intéresse
        const d=document.querySelectorAll("#c > div"),
// les zones spéciales sont matérialisées par une couleur à la con
        couleur=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
        d.forEach((v,ind)=>{
                let col="#";
                for(let i=0;i<6;i++){
                        col+=couleur[Math.floor(Math.random()*16)];
                        v.style.background=col;
                }
// on repère les div par un id
                v.setAttribute("id","truc"+ind);
        })
 
// et là on essaie de gérer les molettes
        window.addEventListener("wheel",(e)=>{
                // uniquement si on est dans un div spécial 
                // on affiche le précédent ou le suivant avec un cran de scroll
                if(e.target.id.indexOf("truc")!=-1){
                        let n=Number(e.target.id.substring(4));
                        if(e.deltaY<0){
                                        if(n>0){
                                                e.preventDefault();
                                                document.getElementById("truc"+(n-1)).scrollIntoView();
                                        }
                        }
                        else {
                                        if(n<d.length-1){
                                                e.preventDefault();
                                                document.getElementById("truc"+(n+1)).scrollIntoView();
                                        }
                        }       
                }
        },{passive:false})
})
 
 
</script>
</body>
</html>

27/02/2020, 18h02
phoenix11

2 pièce(s) jointe(s)

Merci pour ton code, mais c'est pas exactement ce dont j'ai besoin.
Voici ce que j'ai réalisé et le but est, lors du scroll, que le nombre s'affiche de façon centrée.
Merci.
27/02/2020, 18h34
Invité

Citation:

Envoyé par clemy53

...dès que l'utilisateur scroll d'un cran, le site descende à la div d'en dessous / d'au dessus

C'est bien gentil, mais...

...Et si le contenu de la div fait PLUS que la hauteur de la fenêtre ?
On ne peut pas lire la suite du div...
Ce qui est souvent le cas, sur smartphone par exemple (où la hauteur de fenêtre est très limitée).

N.B. J'ai testé tes fichiers...
Je ne vois pas ce que tu veux faire... :koi:
27/02/2020, 21h15
phoenix11

scroll

Tout d'abord, je te remercie de ton aide.
Comme tu peux le constater, lorsqu'on scrolle sur les numéros, il se crée un décalage par rapport à leur visibilité.
Ce que je veux faire, c'est quand on scrolle, c'est le numéro suivant ou précédent qui s'affiche correctement.

Merci.

Solution

Salut à tous et merci.
J'ai trouvé une alternative à mon problème. Cela fonctionne et je partage pour ceux qui serait intéressé.
A noter que la fonction myFunctionM(this.value) est présente afin de signifier que le premier numéro validé est un millier, puis le second la centaine, etc..

enfin , j'ai établi une autre fonction qui concantaine ces chiffres.

Merci à toutes et à tous.

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<div class="rouge3">
    <div id="carousel-wrapper-M">
        <span id="item-0M"></span>
        <span id="item-1M"></span>
        <span id="item-2M"></span>
        <span id="item-3M"></span>
        <span id="item-4M"></span>
        <span id="item-5M"></span>
        <span id="item-6M"></span>
        <span id="item-7M"></span>
        <span id="item-8M"></span>
        <span id="item-9M"></span>
        <div class="carousel-itemM item-0M">
            <form>
                <input type="radio" id="zeroM" name="nom" onclick="myFunctionM(this.value)" value="0" />
                <h2><label for="zeroM">0</label></h2>
                <a class="arrowM arrowM-prevM" href="#item-1M"></a>
                <a class="arrowM arrowM-nextM" href="#item-9M"></a>
            </form>
        </div>
        <div class="carousel-itemM item-1M">
            <form>
                <input type="radio" id="unM" name="nom" onclick="myFunctionM(this.value)" value="1" />
                <h2><label for="unM">1</label></h2>
                <a class="arrowM arrowM-prevM" href="#item-2M"></a>
                <a class="arrowM arrowM-nextM" href="#item-0M"></a>
            </form>
        </div>
        <div class="carousel-itemM item-2M">
            <form>
                <input type="radio" id="deuxM" name="nom" onclick="myFunctionM(this.value)" value="2" />
                <h2><label for="deuxM">2</label></h2>
                <a class="arrowM arrowM-prevM" href="#item-3M"></a>
                <a class="arrowM arrowM-nextM" href="#item-1M"></a>
            </form>
        </div>
        <div class="carousel-itemM item-3M">
            <form>
                <input type="radio" id="troisM" name="nom" onclick="myFunctionM(this.value)" value="3" />
                <h2><label for="troisM">3</label></h2>
                <a class="arrowM arrowM-prevM" href="#item-4M"></a>
                <a class="arrowM arrowM-nextM" href="#item-2M"></a>
            </form>
        </div>
        <div class="carousel-itemM item-4M">
            <form>
                <input type="radio" id="quatreM" name="nom" onclick="myFunctionM(this.value)" value="4" />
                <h2><label for="quatreM">4</label></h2>
                <a class="arrowM arrowM-prevM" href="#item-5M"></a>
                <a class="arrowM arrowM-nextM" href="#item-3M"></a>
            </form>
        </div>
        <div class="carousel-itemM item-5M">
            <form>
                <input type="radio" id="cinqM" name="nom" onclick="myFunctionM(this.value)" value="5" />
                <h2><label for="cinqM">5</label></h2>
                <a class="arrowM arrowM-prevM" href="#item-6M"></a>
                <a class="arrowM arrowM-nextM" href="#item-4M"></a>
            </form>
        </div>
        <div class="carousel-itemM item-6M">
            <form>
                <input type="radio" id="sixM" name="nom" onclick="myFunctionM(this.value)" value="6" />
                <h2><label for="sixM">6</label></h2>
                <a class="arrowM arrowM-prevM" href="#item-7M"></a>
                <a class="arrowM arrowM-nextM" href="#item-5M"></a>
            </form>
        </div>
        <div class="carousel-itemM item-7M">
            <form>
                <input type="radio" id="septM" name="nom" onclick="myFunctionM(this.value)" value="7" />
                <h2><label for="septM">7</label></h2>
                <a class="arrowM arrowM-prevM" href="#item-8M"></a>
                <a class="arrowM arrowM-nextM" href="#item-6M"></a>
            </form>
        </div>
        <div class="carousel-itemM item-8M">
            <form>
                <input type="radio" id="huitM" name="nom" onclick="myFunctionM(this.value)" value="8" />
                <h2><label for="huitM">8</label></h2>
                <a class="arrowM arrowM-prevM" href="#item-9M"></a>
                <a class="arrowM arrowM-nextM" href="#item-7M"></a>
            </form>
        </div>
        <div class="carousel-itemM item-9M">
            <form>
                <input type="radio" id="neufM" name="nom" onclick="myFunctionM(this.value)" value="9" />
                <h2><label for="neufM">9</label></h2>
                <a class="arrowM arrowM-prevM" href="#item-0M"></a>
                <a class="arrowM arrowM-nextM" href="#item-8M"></a>
            </form>
        </div>
    </div>
</div>
<div class="bleu3">
    <div class="resultat">
        <div id="para2">
            <p>Tentative N° : <span id="para20">0</span><span>/13</span></p>
        </div>
        <div id="para1">
            <p>Votre Code : <span id="para10"></span></p>
        </div>
        <div id="para3">
            <p><span id="para30"></span></p>
        </div>
    </div>
</div>
<div class="vert4">
    <div class="code">
        <div id="bouton">
            <p><input type="button" onClick="concant();reload()" value="Ouvrir" /></p>
        </div>
    </div>
</div>

Puis le css :

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
/* général*/
body{
	width: 100%;
	margin: auto;
}
p{
	color: black;
	text-align: center;
}
.rouge3{
   margin: auto;
   text-align: center;
   font-size: 1em;
   width: 200px;
  }
/* objets*/
#carousel-wrapper-M {
  height:158px;
  position:relative;
  width:60px;
 
}
.carousel-itemM {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  padding:25px 50px;
  opacity:0;
  transition: all 0.2s ease-in-out;
  border-radius: 30px ;
  box-shadow: inset -1px 2px 5px 10px rgba(107, 201, 234, 0.7);
}
/* flêches H et B*/
.arrowM {
  border: solid white;
    border-width: 0 5px 5px 0;
    display: inline-block;
    padding: 12px;
}
.arrowM:hover{
  border: solid rgba(248, 6, 78, 0.74);
    border-width: 0 5px 5px 0;
    display: inline-block;
    padding: 12px;
}
.arrowM-prevM {
  left: 16px;
  margin-top: -40px;  
  position:absolute;
  top:50%;
  transform:translateY(-50%) rotate(-135deg);
}
.arrowM-nextM {
    right: 16px;
    margin-top: 40px;
  position:absolute;
  top:50%;
  transform:translateY(-50%) rotate(45deg);
  }
 
.light{
  color:white;
}
/*Select every element*/
[id^="item"] {
    display: none;
  }
/* numéros*/
.item-0M {
	padding-left: 19px;
    font-size: 2em;
    z-index: 2;
    opacity: 1;
    background-color: rgba(107, 201, 234, 0.7);
  background-size:cover;
  padding-top: 8px;
  }
.item-1M {
	padding-left: 19px;
    font-size: 2em;
    background-color: rgba(107, 201, 234, 0.7);
   background-size:cover;
   padding-top: 8px;
}
.item-2M {
	padding-left: 19px;
    font-size: 2em;
    background-color: rgba(107, 201, 234, 0.7);
   background-size:cover;
   padding-top: 8px;
}
.item-3M {
	padding-left: 19px;
    font-size: 2em;
    background-color: rgba(107, 201, 234, 0.7);
   background-size:cover;
   padding-top: 8px;
}
.item-4M {
	padding-left: 19px;
    font-size: 2em;
    background-color: rgba(107, 201, 234, 0.7);
   background-size:cover;
   padding-top: 8px;
}
.item-5M {
	padding-left: 19px;
    font-size: 2em;
    background-color: rgba(107, 201, 234, 0.7);
   background-size:cover;
   padding-top: 8px;
}
.item-6M {
	padding-left: 19px;
    font-size: 2em;
    background-color: rgba(107, 201, 234, 0.7);
   background-size:cover;
   padding-top: 8px;
}
.item-7M {
	padding-left: 19px;
    font-size: 2em;
    background-color: rgba(107, 201, 234, 0.7);
   background-size:cover;
   padding-top: 8px;
}
.item-8M {
	padding-left: 19px;
    font-size: 2em;
    background-color: rgba(107, 201, 234, 0.7);
   background-size:cover;
   padding-top: 8px;
}
.item-9M {
	padding-left: 19px;
    font-size: 2em;
    background-color: rgba(107, 201, 234, 0.7);
   background-size:cover;
   padding-top: 8px;
}
/* changements des numéros en fonction des flêches*/
*:target ~ .item-0M {
    opacity: 0;
  }
 
#item-0M:target ~ .item-0M  {
    opacity: 1;
  }
 
#item-1M:target ~ .item-1M, #item-2M:target ~ .item-2M, #item-3M:target ~ .item-3M, 
#item-4M:target ~ .item-4M, #item-5M:target ~ .item-5M, #item-6M:target ~ .item-6M, 
#item-7M:target ~ .item-7M, #item-8M:target ~ .item-8M, #item-9M:target ~ .item-9M {
    z-index: 9;
    opacity: 1;
  }
  /* label de l'input submit*/
label{
    font-size: 1em;
  --couleur:0, 0, 0; 
    color: white; 
    text-shadow:  0 1px 0 #ccc,  0 2px 0 #acacac, 0 3px 0 #a0a0a0, 0 4px 0 #9b9a9a, 0 5px 0 #888787, 0 6px 1px rgba(var(--couleur),.1), 0 0 5px rgba(var(--couleur),.1), 0 1px 3px rgba(var(--couleur),.3), 0 3px 5px rgba(var(--couleur),.3), 0 5px 10px rgba(var(--couleur),.25), 0 10px 10px rgba(var(--couleur),.2), 0 20px 20px rgba(var(--couleur),.15); 
}
label:hover{
	cursor: pointer;
    font-size: 1em;
  --couleur:0, 0, 0; 
    color: red; 
    text-shadow:  0 1px 0 #ccc,  0 2px 0 #acacac, 0 3px 0 #a0a0a0, 0 4px 0 #9b9a9a, 0 5px 0 #888787, 0 6px 1px rgba(var(--couleur),.1), 0 0 5px rgba(var(--couleur),.1), 0 1px 3px rgba(var(--couleur),.3), 0 3px 5px rgba(var(--couleur),.3), 0 5px 10px rgba(var(--couleur),.25), 0 10px 10px rgba(var(--couleur),.2), 0 20px 20px rgba(var(--couleur),.15); 
}
 
/* On efface l'input radio et l'input submit pour ne garder que le label de ce dernier*/
input[type="radio"]{
    display: none;
}
input[type="submit"]{
	display: none;
}
 .vert4{
	width: 500px;
   margin: auto;
   text-align: center;
   font-size: 1em;
  }
#code{
	flex: 1;
	margin-top: 5px;
    height: 90px;
    text-align: center;
    min-width: 240px;
	text-shadow: 5px 5px 5px white;
	margin-right: 10px;
}
/* bouton valider*/
#bouton{
	margin-top: -12px;
    flex: 1;
    margin-left: 100px ;
    width: 220px;
    height: 120px;
}
[type="button"]{
	 background: radial-gradient(circle, #696969, #7b7b7b, #8e8e8e, #a1a1a1, #b4b4b4, #bfbfbf, #cbcbcb, #d6d6d6, #dcdcdc, #e2e2e2, #e9e9e9, #efefef);
    border: 1px solid grey;
    color: white;
    text-decoration: none;
    cursor: grab;
    font-size: 35px;
    border-radius: 100%;
    height: 105px;
    box-shadow: 10px 10px 10px grey;
    -webkit-transition:-webkit-transform .9s; // Chrome Safari
  -moz-transition:-moz-transform .9s;       // Mozilla
  -o-transition:-o-transform .9s;           // Opéra
  -ms-transition:-ms-transform .9s;         // IE
  transition:transform .9s;
}
[type="button"]:hover{
  -webkit-transform:rotate(45deg); 
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg); 
  -ms-transform:rotate(45deg); 
  transform:rotate(45deg);
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
function myFunctionM(browser) {
if (document.getElementById("resultM").value == "") {
	document.getElementById("resultM").value = browser;
}
else if(document.getElementById("resultC").value == "") {
	document.getElementById("resultC").value = browser;
}
else if(document.getElementById("resultD").value == "") {
	document.getElementById("resultD").value = browser;
}
else if(document.getElementById("resultU").value == "") {
	document.getElementById("resultU").value = browser;
}
}
</script>