scroller dans un élément bloc.
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:
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:
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:
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
| /* 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);
}
}
} |
Le seul truc qui cloche: lorsque je clique sur un lien autre que syntaxe, ça m'affiche la section syntaxe au lieu de scroller !!!
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.
