Bonjour,
j'apprends le javascript je suis des tutoriels sur le scrolling avec du javascript.
Mais je voulais adapter ce que j'ai pu comprendre ( encore un petit niveau ) pour faire du scrolling dans un block !
Car tous les tutos que j'ai vus se font sur la page web : une barre de navigation et on clique pour scroller à l'endroit voulu.
Donc on sort un window.scrollTo (x,y) et ça marche , mais je n'arrive pas à adapter (enfin, je pense que mon problème vient de là).
Attention, la page est moche , mais ce n'est pas ce sur quoi je travaille en ce moment dans mon apprentissage ( il y aura un gros travail à faire là aussi !)
voici mon HTML:
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 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="fiches.css"> <title>fiche</title> </head> <body> <div class="wrap"> <header> <h2 class="subcategory">catégorie</h2> <div class="title"> <h1>titre</h1> <p class="definition">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et ea nam beatae excepturi modi tempora molestiae sint rerum, voluptates commodi consequuntur facere sapiente nostrum vero deserunt molestias maxime ducimus explicabo?</p> </div> <h2 class="type">sous-catégorie</h2> </header> <div class="content"> <nav> <ul> <li><a href="#syntaxe">Syntaxe</a></li> <li><a href="#exemples">Exemples</a></li> <li><a href="#associations">Associations</a></li> <li><a href="#liens">liens</a></li> <li><a href="#illustrations">Illustrations</a></li> <li><a href="#notes">notes</a></li> </ul> </nav> <main class="display"> <section id="syntaxe"><h2>Syntaxe</h2></section> <section id="exemples"><h2>Exemples</h2></section> <section id="associations"><h2>Associations</h2></section> <section id="liens"><h2>liens</h2></section> <section id="illustrations"><h2>Illustrations</h2></section> <section id="notes"><h2>Notes</h2></section> </main> </div> <footer></footer> </div> <script src="lescroll.js"></script> </body> </html>
puis mon CSS:
Code CSS : 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
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 * { margin: 0px; padding: 0px; box-sizing: border-box; } body { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; } .wrap { height: 60%; width: 60%; display: flex; justify-content: center; flex-direction: column; border: 2px solid firebrick; } header { width: 100%; height: 30%; margin-left: 5px; display: flex; justify-content: space-between; } h1 { text-transform: uppercase; } .content { height: 70%; width: 100%; margin-left: 5px; display: flex; } .title { text-align: center; width: 60%; height: 100%; } main { border: 2px solid black; width: 80%; height: 100%; margin-left: 5px; margin-right: 5px; overflow: hidden; /*scroll-behavior: smooth;*/ } nav { width: 20%; height: 100%; } ul { height: 100%; list-style-type: none; display: flex; flex-direction: column; justify-content: space-between; } li { border: 2px solid red; text-align: center; height: 16%; line-height: 250%;; } section{ display: flex; align-items: center; justify-content: center; height: 100%; text-transform: uppercase; } section:nth-child(2n+1) { background-color: red; } a { display: block; width: 100%; height: 100%; } ul a:hover { background-color: #000; color: white; } .subcategory, .type { width: 20%; height: 100%; text-align: center; padding: 5% 0; }
et enfin mon javascript:
Le seul truc qui cloche: lorsque je clique sur un lien autre que syntaxe, ça m'affiche la section syntaxe au lieu de scroller !!!
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
27
28
29
30
31
32
33
34
35
36
37
38 /* recupération des liens et association au click */ const links = document.querySelectorAll('ul li a'); console.log(links); for (const link of links) { link.addEventListener('click', move); }; function move(event) { event.preventDefault(); console.clear(); console.group("le lien: ", this); /* récupération de la position de la cible du lien */ const ref = this.getAttribute('href'); console.log("nom dela cible:", ref); const target = document.querySelector('main').querySelector(ref); console.log("la cible: ", target); const targetPosition = target.getBoundingClientRect().top; console.log("position de la cible: ", targetPosition); /* récupération de la distance à scroller: celle du main - celle de la cible */ const finalposition = document.querySelector('main').getBoundingClientRect().top; console.log("position du main: ", finalposition); const distanceToScroll = targetPosition - finalposition; console.log("pixels à parcourrir: ", distanceToScroll); let start = null; const duration = 2000; window.requestAnimationFrame(scrolling); function scrolling(timestamp) { if (!start) { start = timestamp; } let progress = (timestamp - start); const step = distanceToScroll*(progress/duration); document.querySelector('main').scrollTo(0, step); if (progress<duration) { window.requestAnimationFrame(scrolling); } } }
Et je dois cliquer encore une fois sur le même lien pour scroller , mais du coup les calculs qui se font en partant de la section à scroller sont faux et le scroll n'est pas bon !
Alors voilà, pourquoi ça ne scrolle pas lorsque je clique sur un lien ? que se passe-t-il justement lorsque je clique ?
Merci pour vos réponses
Laurent.
Partager