IPB

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> Le scroll Down, Javascript
Options
Marshall45
posté 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
Go to the top of the page
 
+Quote Post
Philippe64
posté 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)
Go to the top of the page
 
+Quote Post
scoch
posté 30 Jul 2019, 14:09
Message #3


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
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
Go to the top of the page
 
+Quote Post
Marshall45
posté 30 Jul 2019, 14:18
Message #4


Nouveau Membre


Groupe : Membres
Messages : 7
Inscrit : 29 Jul 2019
Membre no 208 488



Citation (Philippe64 @ 30 Jul 2019, 13:29) *
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) ?

Citation (scoch @ 30 Jul 2019, 14:09) *
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 !
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



Nous sommes le : 28th March 2024 - 13:34