Scroll élément par élément semi-automatique
Bonjour à tous,
Je sollicite votre aide aujourd'hui car je patauge depuis quelques jours sur une fonctionnalité que j'essaye de développer.
Voici ma situation:
Mon site comporte trois éléments div qui correspondent tous à la taille de la fenêtre du navigateur.
Je souhaite que lors du scroll (un ou plusieurs crans de roulette pour gérer toutes les sensibilités), l’élément suivant remonte ou redescende automatiquement pour s'ajuster à la fenêtre.
Jusqu'ici je m'en sors pas trop mal car cela fonctionne à peu près mais le résultat n'est pas parfait.
Comme vous le constaterez dans mon code un peu plus bas, celui-ci est un peu hasardeux pour gérer la sensibilité de la roulette (incrémentation des variable "up" et "down").
Alors mes questions sont:
Est-ce qu'il existe un moyen de gérer la sensibilité de la molette d'un utilisateur ? (Je n'ai rien trouver la dessus)
et comment pourrais-je optimiser mon code pour une fonctionnalité fluide.
Comme convenu voici mon code:
index.php
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
| <!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="public/css/style.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="page">
<div class="content c1">
</div>
<div class="content c2">
</div>
<div class="content c3">
</div>
</div>
<script type="text/javascript" src="public/js/script.js"></script>
</body>
</html> |
script.js
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
| var windowHeight;
$(document).ready(function(){
windowHeight = window.innerHeight;
$(".content").css("height", windowHeight);
$(".c1").slideDown(500);
$(".header").delay(3000).slideUp(800);
});
$(window).resize(function(){
windowHeight = window.innerHeight;
$(".content").css("height", windowHeight);
});
var down = 0;
var up = 0;
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
up++;
/*console.log("--------------");
console.log("up " + up);
console.log("down " + down);
console.log("--------------");*/
if(up > 0 && up < 7) {
scrollTo($(".c2"));
down = 7;
} else if(up >= 7) {
scrollTo($(".c1"));
down = 0;
}
}
else {
down++;
/*console.log("--------------");
console.log("down " + down);
console.log("up " + up);
console.log("--------------");*/
if(down > 0 && down < 7) {
scrollTo($(".c2"));
if(down >= 6) {
down = 6;
}
up = 7;
} else if(down >= 7) {
scrollTo($(".c3"));
up = 0;
}
}
});
function scrollTo( target ) {
if( target.length ) {
$("html, body").stop().animate( { scrollTop: target.offset().top }, 1500);
}
} |
et style.css si certains d'entre vous veulent essayer:
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
| * {
margin: 0;
padding: 0;
}
div.page {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
div.content {
height: 85%;
}
div.content.c1 {
background-color: lightgray;
}
div.content.c2 {
background-color: gray;
}
/*---------FLEXBOX---------*/
div.header, div.content, div.c2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
} |
Je vous remercie d'avance pour votre aide.
