1 réponse
Salut,
j'ai trouvé un truc assez bâtard, à voir si vous pouvez utiliser pour votre idée.
Je n'ai pas trouver comment obtenir la taille de la barre de défilement(scrollbar) mais il reste la solution d'en faire une en HTML/CSS. Je ne l'ai pas fait mais ça permettra d'avoir une taille fixée donc de calculer la limite exacte dans la page.
j'ai trouvé un truc assez bâtard, à voir si vous pouvez utiliser pour votre idée.
Je n'ai pas trouver comment obtenir la taille de la barre de défilement(scrollbar) mais il reste la solution d'en faire une en HTML/CSS. Je ne l'ai pas fait mais ça permettra d'avoir une taille fixée donc de calculer la limite exacte dans la page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<head>
<title>boucle scroll quand en bas</title>
<style type="text/css" rel="stylesheet" >
body{
overflow:scroll none;
}
#disp{position:fixed; top:1em;
width:98%;height:2em;text-align:center;
color:red;border:1px solid firebick;background-color:#000;
}
#spacer{display:block;height:3000px;border:1px solid red;}
</style>
</head>
<body>
<p id="disp"></p>
<span id="spacer"></span>
<script>
function getScrollTop(){return window.pageYOffset || window.scrollTop;}
function getPageHeight(){return document.body.offsetHeight || document.body.scrollHeight;}
window.addEventListener("scroll", function(){
var position=getScrollTop();
var hauteur=getPageHeight();
var maxHauteur=Math.floor(hauteur*0.68);//-- 68% de la page on considére le scroll est au bout
var body = document.body; // Safari
var html = document.documentElement; // Chrome, Firefox, IE and Opera places the overflow at the <html> level, unless else is specified.
document.getElementById('disp').innerHTML='('+position+'/'+hauteur+') scroll maxi:'+maxHauteur;
if(position>maxHauteur){
console.log('limite atteinte');
body.scrollTop = 0;
html.scrollTop = 0;
}
});
</script>
</body>
</html>
