Bonjour, je viens vers vous car je rencontre un probleme technique auquel je n'arrive pas à trouver de réponse. J'ai fait un site en onepage et j'ai fait en sorte que le scroll de la souris effectue un changement de page
Exemple :

SECTION1
SECTION2
SECTION3

Si je suis dans la section1 au scroll de la souris vers le bas il y'a un mouvement de slide qui va directement vers la section2

Petit soucis, dans la section1 j'ai inséré un svg dans une balise object hors cette balise me pose problème car si je scroll dessus la molette de la souris reprend son mouvement natif et le scroll vers le bas ne s'effectue pas. Une idée ?

Voici mon code js pour le mouvement de la souris (j'utilise un peu de Jquery)

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
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
109
110
111
112
113
 
$(document).ready(function() {
 
// On déclare les varialbes des sections
 
var section1 = document.getElementById('section1');
var section2 = document.getElementById('section2');
var section3 = document.getElementById('section3');
var section4 = document.getElementById('section4');
var section5 = document.getElementById('section5');
 
// On déclare le ul du nav
 
var menu1 = document.getElementById('menu1');
 
//On ecoute le scroll de la souris    
 
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);    
 
 
// On normalize le scroll de la souris pour l'evenement window 
 
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;
} 
 
// On définit la valeur du scroll de la souris    
 
function handle(delta) {
 
    if (delta < 0) {
 
        if (menu1.children[0].className == "active"){
            scrolldown(section2, 0, 1000)    
 
        } else if (menu1.children[1].className == "active"){
            scrolldown(section3, 1, 1000)     
 
        } else if (menu1.children[2].className == "active"){
            scrolldown(section4, 2, 1000)
 
        } else if (menu1.children[3].className == "active"){
            scrolldown(section5, 3, 1000)
        }
 
    } else {
 
        if (menu1.children[1].className == "active"){
            scrollup(section1, 1, 1000) 
 
        } else if (menu1.children[2].className == "active"){
            scrollup(section2, 2, 1000)
 
        } else if (menu1.children[3].className == "active"){
            scrollup(section3, 3, 1000)
 
        } else if (menu1.children[4].className == "active"){
            scrollup(section4, 4, 1000)    
        }
 
    }
 
}    
 
// On définit le changement de de class des li du menu et la vitesse de défilement d'une page à l'autre avec un scrolldown   
 
// Pour savoir dans quel section je me situe j'utilise un menu sur la gauche (menu.children[i]) auquel j'applique une class 'active' ou 'desactive' selon ou je me situe.
// le menu.children[0] est en class 'active' au chargement de la page, si je scroll une fois vers le bas menu.children[0] prend la class 'desactive' et menu.children[1] prend la classe active  
 
function scrolldown(e, i, s){
 
    menu1.children[i].className = "desactive"
    menu1.children[i+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
 
}
 
// On définit le changement de de class des li du menu et la vitesse de défilement d'une page à l'autre avec un scrollup           
function scrollup(e, i, s) {
 
    menu1.children[i].className = "desactive"
    menu1.children[i-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
}     
 
})