Scrolling infini en rouleau

Fermé
Utilisateur anonyme - 18 sept. 2019 à 15:24
 nightw - 22 sept. 2019 à 08:23
Bonjour,

J'aimerais savoir s'il est possible de coder une page web dont le scrolling est infini comme un rouleaux. Je m'explique: le scrolling infini ordinaire est assez courant, où la suite de la page charge en continu et de nouvelles informations reviennent comme sur Instagram. Mais ce que j'aimerais faire c'est que, lorsque le bas de la page est atteint, en continuant de scroller dans la même direction, le haut de la page revienne. Comme un rouleau qu'on tournerait en boucle.

A savoir que je suis limité à de l'HTML, CSS et Javascript pour faire ça.

Merci d'avance pour vos réponses en espérant que ça soit réalisable !

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.
<!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>
0