Scroll élément par élément semi-automatique

**vXTikadXv** · 05/11/2018, 13h07

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 HTML :

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
<!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 JavaScript :

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
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 CSS :

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
* {
	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.

**Toufik83** · 05/11/2018, 16h08

il y a une fonction animSkillsBars() que tu nous as pas montré.

**vXTikadXv** · 05/11/2018, 16h29

Oui j'ai oublié de supprimer cette ligne avant de poster, elle fonctionne correctement mais n'influe pas sur le scroll

**Toufik83** · 05/11/2018, 18h16

si tu n'as que 3 div dans la page, et si les divs ont la même hauteur, je pense que ce bout de code sera suffisant

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
 
$(window).on('mousewheel', function(event) {
  var repere = ($(document).height() - $(window).scrollTop());
  if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { //up
    if (repere / 1.5 < $(window).scrollTop()) {
      scrollTo($(".c2"));
    } else {
      scrollTo($('.c1'));
    }
  } else { //down
    if (repere / 3 > $(window).scrollTop()) {
      scrollTo($('.c2'));
    } else {
      scrollTo($('.c3'));
    }
  }
});

sinon il existent beaucoup de plugin jQuery qui permettent de contrôler le mousewhell, comme par exemple Celui là

**vXTikadXv** · 05/11/2018, 20h14

Super ça fonctionne parfaitement avec ce code exceptée le listener: j'ai du remettre celui que j'avais utilisé $(window).bind("mousewheel ...
le tiens ne se déclenchais pas et je ne vois pas pourquoi...
Il me manquais simplement le repère.
Merci beaucoup pour ton aide.

Scroll élément par élément semi-automatique

jQuery

Vue hybride

Discussions similaires

Partager

Partager