Ceci permet d’activer des événements différents en cas de scroll vers le haut ou vers le bas.
Le code est commenté pour permettre de s’y retrouver. Quelques astuces sont en effet utiliser pour rendre le script le plus léger et compatible possible.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scroll top et bottom</title>
<link rel="stylesheet" href="style.css">
<script src="jquery-1.9.0.min.js"></script>
<style>
#test{
padding: 5px 7px;
background: #e9e9e9;
position: fixed;
bottom: 15px;
left: 15px;
}
.bloc {
height:400px;
background-color:#eee;
}
.bloc.rouge { background-color:red; }
.bloc.bleu { background-color:blue; }
</style>
</head>
<body>
<p id="test"></p>
<div class="bloc"></div>
<div class="bloc rouge"></div>
<div class="bloc bleu"></div>
</body>
<script>
//attach the "wheel" event if it is supported, otherwise "mousewheel" event is used
$("html").on(("onwheel" in document.createElement("div") ? "wheel" : "mousewheel"), function (e) {
var evt = e.originalEvent || e;
//this is what really matters
var deltaY = evt.deltaY || (-1 / 40 * evt.wheelDelta), //wheel || mousewheel
scrollTop = $(this).scrollTop() || $("body").scrollTop(); //fix safari
if (deltaY > 0) {
$("#test").html(scrollTop + " : <b>scroll down</b>");
} else {
$("#test").html(scrollTop + " : <b>scroll up</b>");
}
});
</script>
</html>