Utilisation de l'event wheel

Bonjour, j'ai posté un message précédemment avec intitulé "faire un one page avec scroll" mais personne n'a répondu :/

Quelques temps ont passé Je reviens vers vous avec quelque chose de plus intéressant je l’espère. Mon but était de faire un one page dont chaque page s'adapte à l'écran de l'utilisateur grâce à "window.innerHeight" et que je puisse accéder à chaque page avec la molette. Hors après plusieurs jours de recherche sur le mdn et sur différents sites j'ai réussi à trouvé (marqué dans mon code). Seulement il est assez vieux, il ne marche que sur firefox et certaine méthode sont dépassées et en recherchant sur le mdn je n'arrive pas à trouver les correspondance pour chrome et edge.
Ceci étant avec firefox ca marche nikel, quand je roule un clik vers le bas ça scroll vers la page d'en bas, vers le haut ça scroll en haut et sur chrome et edge quand je scroll un click en bas ca scroll de deux page et quand je scroll un click vers le haut ça scroll 2 pages vers le haut.

Quelqu'un pourrait il juste m'indiquer un tuto ou un site ou tout simplement m'expliquer comment faire fonctionner l'évenement wheel(event)

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
 
 
/// SOURCE CODE : http://www.adomas.org/javascript-mouse-wheel/
 
function wheel(event){
        var delta = 0;
        if (!event) /* For IE. */
                event = window.event;
        if (event.wheelDelta) { /* IE/Opera. */
                delta = event.wheelDelta/120;
        } else if (event.detail) { /** Mozilla case. */
                /** In Mozilla, sign of delta is different than in IE.
                 * Also, delta is multiple of 3.
                 */
                delta = -event.detail/3;
        }
        /** If delta is nonzero, handle it.
         * Basically, delta is now positive if wheel was scrolled up,
         * and negative, if wheel was scrolled down.
         */
        if (delta)
                handle(delta);
        /** Prevent default actions caused by mouse wheel.
         * That might be ugly, but we handle scrolls somehow
         * anyway, so don't bother here..
         */
        if (event.preventDefault)
                event.preventDefault();
	event.returnValue = false;
}
 
/** Initialization code. 
 * If you use your own event management code, change it as required.
 */
if (window.addEventListener){
/** DOMMouseScroll is for mozilla. */
window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;
}
 
function handle(delta) {
 
    if (delta < 0) {
 
        if (document.querySelector("ul").children[0].childNodes[1].className == "active"){
            scrolldown(first, 0, 1000)    
 
        } else if (document.querySelector("ul").children[1].childNodes[1].className == "active"){
            scrolldown(second, 1, 1000)     
 
        } else if (document.querySelector("ul").children[2].childNodes[1].className == "active"){
            scrolldown(third, 2, 1000)
 
        } else if (document.querySelector("ul").children[3].childNodes[1].className == "active"){
            scrolldown(four, 3, 1000)
        }
 
    } else {
 
        if (document.querySelector("ul").children[1].childNodes[1].className == "active"){
            scrollup(tete, 1, 1000) 
 
        } else if (document.querySelector("ul").children[2].childNodes[1].className == "active"){
            scrollup(first, 2, 1000)
 
        } else if (document.querySelector("ul").children[3].childNodes[1].className == "active"){
            scrollup(second, 3, 1000)
 
        } else if (document.querySelector("ul").children[4].childNodes[1].className == "active"){
            scrollup(third, 4, 1000)    
        }
 
    }
 
}
 
function scrolldown(e, i, s){
 
    document.querySelector("ul").children[i].childNodes[1].className = "desactive"
    document.querySelector("ul").children[i+1].childNodes[1].className = "active"
 
    var page = $(e); // Page cible
    var speed = s; // Durée de l'animation (en ms)
    $('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
    return false
 
}
 
 
function scrollup(e, i, s) {
 
    document.querySelector("ul").children[i].childNodes[1].className = "desactive"
    document.querySelector("ul").children[i-1].childNodes[1].className = "active"
 
    var page = $(e); // Page cible
    var speed = s; // Durée de l'animation (en ms)
    $('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
    return false
}

jour

de nos jour c'est devenu plus simple

Code:

1
2
3
4
5
6
7
8
9
10
function wheele(e){
 
e.preventDefault();
var delta=e.deltaY
handle(delta)
}
 
 
addEventListener("load", function(){
document.body.addEventListener("wheel",wheele, false);

C'est top

Merci beaucoup pour le coup de main, le code final pour ceux qui souhaiteraient faire mumuse avec le scroll :)

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
 
if (window.addEventListener) {
	// IE9, Chrome, Safari, Opera
	window.addEventListener("mousewheel", wheel, false);
	// Firefox
	window.addEventListener("DOMMouseScroll", wheel, false);
}
// IE 6/7/8
else window.attachEvent("onmousewheel", wheel);
 
function wheel(event){
    var e = window.event || e;
    if (event.wheelDelta) { /* IE/Opera. */
                delta = event.wheelDelta/120;
        } else if (event.detail) { /* Mozilla case. */
 
               delta = -event.detail/3;
        }
        if (delta)
                handle(delta);
 
        if (event.preventDefault)
                event.preventDefault();
	event.returnValue = false;
}
 
function handle(delta) {
 
    if (delta < 0) {
    ////// action lorsque l'on scroll vers le bas//////////           
    } else {
    ////// action lorsque l'on scroll vers le haut//////////        
    }
 
}