Discussion :

[RollinGStaR95]

Bonjour,
Je suis en train de développer mon site perso et j'aimerais faire un test en JS pour savoir si la scrollbar est active sur la page. J'ai un bouton en bas de page qui permet de remonter en haut de page lorsque le scroll existe. Et j'aimerais donc masquer ce bouton si le scroll n'existe pas.

Un truc du style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if(body.scroll == 0){
		$('#up').hide();
	}

Mais évidemment ça marche pas. Soyez pas trop dur, je débute en JS.

Merci de votre aide.

[NoSmoking]

Bonjour,

Mais évidemment ça marche pas. Soyez pas trop dur, je débute en JS.

il faut être curieux et lire la documentation .scrollTop().

[RollinGStaR95]

Si j'avais réussi en lisant la doc ce sujet n'existerait pas.

[NoSmoking]

Si j'avais réussi en lisant la doc ce sujet n'existerait pas.

je ne sais trop comment te répondre...tu te fous de ma g.... ou est tu sûr d'avoir lu la bonne documentation...ou une erreur de copier/coller sûrement.

Je vais garder calme et sérénité de par vers moi pour te dire que nulle part tu ne trouvera body.scroll, en "pur" javascript non plus d'ailleurs.

Je t'engage donc à re-parcourir la documentation, mais utilises le lien que j'ai mis, je viens de le revérifier à toute fins utile.

[RollinGStaR95]

je ne sais trop comment te répondre...tu te fous de ma g....

Pour si peu, fallait carrément pas répondre !

Je t'engage donc à re-parcourir la documentation, mais utilises le lien que j'ai mis, je viens de le revérifier à toute fins utile.

Ce que j'ai fait, et malgré mes tests, cela ne fonctionne pas comme je le souhaite.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
if ($('#main').scrollTop()==0){
	$('#up').hide();
}
else{
	$('#up').show();
}

[NoSmoking]

Pour si peu, fallait carrément pas répondre !

je me risque quand même à répondre

$('#main').scrollTop()

signifie que tu testes l'élément ayant pour ID main ce qui ne doit pas être réellement ce que tu souhaites!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

pour savoir si la scrollbar est active sur la page.

on serait plutôt sur l'observation de $(window).scrollTop().

Maintenant si tu veux observer la variation de la valeur du scroll de la page il te faut mettre une surveillance sur celle ci, pour se faire il existe la méthode .scroll() que l'on va appliquer sur l'objet jQuery $(window).

Si l'on résume on pourrait avoir un code du style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$(function() {
  $(window).scroll(function (){
    if( $(this).scrollTop() == 0){
      $('#up').hide();
    }
    else{
      $('#up').show();
    }
  });
});

on encapsule dans $(function(){....}); pour éviter d'éventuel effet de bord au chargement de la page.

Il te faut également mettre ton élément up en display:none au départ.

[RollinGStaR95]

Ca marche nickel ! Merci du coup de main !
Par contre, je comprends pas trop pourquoi on est forcé d'y mettre un display:none au départ. Car on demande en js de toute façon de cacher le bouton si scrollTop == 0.

Et en effet sans le display none il le laisse tout le temps affiché. Comment se fait-ce ?

[NoSmoking]

Et en effet sans le display none il le laisse tout le temps affiché. Comment se fait-ce ?

simplement au début on ne passe pas dans la fonction attendu que l'événement de scroll n'a pas encore eu lieu.

[GregYoung]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function isScrollbarVisible() {
    var main = document.querySelector('div.liste');
    return (main.offsetHeight < main.scrollHeight) ? true : false;
}

Il suffit simplement de comparer la hauteur de l'élément HTML dans lequel s'affiche (ou non) la scrollbar, par rapport à la hauteur prise par le scrolltrack.
Ici, l'exemple est pour une scrollbar verticale, mais c'est tout aussi fonctionnel pour une horizontale en changeant offsetHeight par offsetWidth, et scrollHeight par scrollWidth.