Discussion :

[mf6913]

Bonsoir, je débute avec javascript (en faite je n'en ai jamais fait avant) mais je dois réussir à intégrer une fonctionnalité dans un de mes projets.
J'ai un site web qui dispose d'une page d'accueil avec plusieurs sections. Chaque section est identifié par une ID. J'aimerai que lorsque je scroll je tombe directement sur l'ID suivante selon la direction dans laquelle je scroll bien entendu. J'ai une première piste avec ces fonctions "document.getElementById('id').scrollIntoView();". J'ai réussi à automatiser le scroll grâce à ces fonctions mais impossible de le déclenché avec une condition. J'ai essayé de mettre un place un listener comme ci-dessous et de déclenché le scroll sur l'ID en fonction de ma position sur l'écran mais impossible d'arriver jusqu'au bout.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
window.addEventListener('scroll', () => {
		console.log(window.scrollY);

Est-ce que quelqu'un pourrait dans un premier temps me confirmer si mon idée est bonne et m'aider à trouver le code adapté. Ou sinon je me suis peut-être complètement trompé et je pars de travers.
En tout cas merci d'avance pour votre aide

[Séb.]

J'ai ceci qui fonctionne pas trop mal.

J'utilise l'événement "wheel" en réaction à la molette de la souris. Cela permet à l'utilisateur de scroller autant qu'il le souhaite par ailleurs (avec la barre de scrolling ou le clavier).

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<script type="module">
 
    const sections = document.getElementsByTagName("section");
 
    for (const section of sections) {
        section.addEventListener("wheel", function (event) {
            event.preventDefault(); // Pour éviter les conflits entre les événements scroll et wheel
            const nextSectionIndex = Number(section.dataset.index) + Math.sign(event.deltaY);
            const target = document.getElementById(`section-${nextSectionIndex}`);
            if (target !== null) {
                target.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
            }
        });
    }
 
</script>
 
<section id="section-0" data-index="0" style="height: 500px; background-color: hsl(0deg 90% 60%)">
    <h2>Section 0</h2>
</section>
 
<section id="section-1" data-index="1" style="height: 500px; background-color: hsl(36deg 90% 60%)">
    <h2>Section 1</h2>
</section>
 
<section id="section-2" data-index="2" style="height: 500px; background-color: hsl(72deg 90% 60%)">
    <h2>Section 2</h2>
</section>
 
<section id="section-3" data-index="3" style="height: 500px; background-color: hsl(108deg 90% 60%)">
    <h2>Section 3</h2>
</section>
 
<section id="section-4" data-index="4" style="height: 500px; background-color: hsl(144deg 90% 60%)">
    <h2>Section 4</h2>
</section>
 
<section id="section-5" data-index="5" style="height: 500px; background-color: hsl(180deg 90% 60%)">
    <h2>Section 5</h2>
</section>
 
<section id="section-6" data-index="6" style="height: 500px; background-color: hsl(216deg 90% 60%)">
    <h2>Section 6</h2>
</section>
 
<section id="section-7" data-index="7" style="height: 500px; background-color: hsl(252deg 90% 60%)">
    <h2>Section 7</h2>
</section>
 
<section id="section-8" data-index="8" style="height: 500px; background-color: hsl(288deg 90% 60%)">
    <h2>Section 8</h2>
</section>
 
<section id="section-9" data-index="9" style="height: 500px; background-color: hsl(324deg 90% 60%)">
    <h2>Section 9</h2>
</section>