Scroll to ID avec javascript

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:

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>