Le scroll Down, Javascript |
Bienvenue invité ( Connexion | Inscription )
Le scroll Down, Javascript |
30 Jul 2019, 13:08
Message
#1
|
|
Nouveau Membre Groupe : Membres Messages : 7 Inscrit : 29 Jul 2019 Membre no 208 488 |
Bonjour tout le monde,
J'ai enfin réalisé mes 2 boutons scroll up et scroll down, et les 2 boutons fonctionnent bien. En revanche concernant scroll down je sais que mon code n'est pas propre, car ma fonction lui demande de disparaître quand je scroll en dessous de 12000 px. Or toutes mes pages ne font pas forcément 12000 px. S"il vous plait, existe-il un moyen de lui dire, fait disparaître ce bouton quand je scroll tout en bas de la page ? Code window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { document.getElementById("Btn-up").style.display = "block"; } else { document.getElementById("Btn-up").style.display = "none"; } if (document.body.scrollTop > 12000 || document.documentElement.scrollTop > 12000) { document.getElementById("Btn-down").style.display = "none"; } else { document.getElementById("Btn-down").style.display = "block"; } } Voilà la partit du code concerné Code if (document.body.scrollTop > 12000 || document.documentElement.scrollTop > 12000) { document.getElementById("Btn-down").style.display = "none"; } else { document.getElementById("Btn-down").style.display = "block"; } Merci pour votre aide |
|
|
30 Jul 2019, 13:29
Message
#2
|
|
Macbidouilleur de bronze ! Groupe : Membres Messages : 263 Inscrit : 31 Aug 2002 Lieu : Saint-Jean-de-Luz Membre no 3 355 |
Sans rentrer dans les détails, mais cela pourra peut être t'aider, je pense que tu peux facilement calculer le fait d'être en bas de page.
Tu peux connaitre la longueur de ta page (disons H) et celle de ta fenêtre (disons FH). Si la position de ton scroll est égale à (H-FH), c'est que tu es en bas ! -------------------- En activité : Macbook pro 15" Core I7 à 2.8Ghz de 2015 - Macbook pro 13" Core I5 à 2.5Ghz - Macbook pro 15" Core duo de 2006 qui marche toujours hyper bien - iPhone 6s - iPad - iPad Mini
En Panne : Imac 27 Pouces Core I7 à 3.4Ghz - mid 2011 (je cherche un écran) A la retraite : Imac C2D 24 Pouces (blanc) à 2.33 Ghz - iBook14" 800 Mhz - Quicksilver 733 - G3 bleu et blanc - Macintosh Classic - iPhone 3G - iPhone 4s Crea64 : creation de site internet à Saint-Jean-de-Luz (64) |
|
|
30 Jul 2019, 14:09
Message
#3
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 4 826 Inscrit : 1 Jul 2010 Membre no 156 073 |
Le problème ici c’est la compatibilité des navigateurs.
Voici un code qui fonctionne : Code window.onscroll = function() { var hauteurPage = document.documentElement.offsetHeight, hauteurFenetre = window.innerHeight, scrollPosition = window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0); console.log(hauteurPage + ', ' + hauteurFenetre + ', ' + scrollPosition); if (hauteurPage <= hauteurFenetre + scrollPosition) { console.log('Bas de page'); } }; Les calculs lors du scroll sont gourmands en ressources à cause de sa fréquence. Voici le même code en plus optimisé. La vérification ne se fait qu’à la fréquence choisie avec un timer (100ms dans cet exemple), et les valeurs de certaines variables sont affectées en dehors de l’événement scroll. Code var hauteurPage = document.documentElement.offsetHeight,
hauteurFenetre = window.innerHeight, scrollPosition, timerScroll, frequenceTimerScroll = 100; function onScroll() { if(timerScroll) { window.clearTimeout(timerScroll); } timerScroll = window.setTimeout(function() { scrollPosition = window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0); console.log(hauteurPage + ', ' + hauteurFenetre + ', ' + scrollPosition); if (hauteurPage <= hauteurFenetre + scrollPosition) { console.log('Bas de page'); } }, frequenceTimerScroll); } window.addEventListener('scroll', onScroll); Ce message a été modifié par scoch - 30 Jul 2019, 14:14. -------------------- L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
|
|
|
30 Jul 2019, 14:18
Message
#4
|
|
Nouveau Membre Groupe : Membres Messages : 7 Inscrit : 29 Jul 2019 Membre no 208 488 |
Sans rentrer dans les détails, mais cela pourra peut être t'aider, je pense que tu peux facilement calculer le fait d'être en bas de page. Tu peux connaitre la longueur de ta page (disons H) et celle de ta fenêtre (disons FH). Si la position de ton scroll est égale à (H-FH), c'est que tu es en bas ! Merci pour ta réponse, mais je n'ai pas compris où tu veux en venir. En gros tu dis que je peux ajouter ce type de calcul à la fonction, de sorte qu'il me calcule automatiquement le nombre de px nécessaire pour arriver tout en bas de la page (afin d'effacer le bouton), et ça pour toutes mes autres pages également (même si elles n'ont pas toute le même nombre de px) ? Le problème ici c’est la compatibilité des navigateurs. Voici un code qui fonctionne : Code window.onscroll = function() { var hauteurPage = document.documentElement.offsetHeight, hauteurFenetre = window.innerHeight, scrollPosition = window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0); console.log(hauteurPage + ', ' + hauteurFenetre + ', ' + scrollPosition); if (hauteurPage <= hauteurFenetre + scrollPosition) { console.log('Bas de page'); } }; Les calculs lors du scroll sont gourmands en ressources à cause de sa fréquence. Voici le même code en plus optimisé. La vérification ne se fait qu’à la fréquence choisie avec un timer (100ms dans cet exemple), et les valeurs de certaines variables sont affectées en dehors de l’événement scroll. Code var hauteurPage = document.documentElement.offsetHeight, hauteurFenetre = window.innerHeight, scrollPosition, timerScroll, frequenceTimerScroll = 100; function onScroll() { if(timerScroll) { window.clearTimeout(timerScroll); } timerScroll = window.setTimeout(function() { scrollPosition = window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0); console.log(hauteurPage + ', ' + hauteurFenetre + ', ' + scrollPosition); if (hauteurPage <= hauteurFenetre + scrollPosition) { console.log('Bas de page'); } }, frequenceTimerScroll); } window.addEventListener('scroll', onScroll); Merci beaucoup je vais tester ça, et je te redit. Merci encore ! |
|
|
Nous sommes le : 25th April 2024 - 00:54 |