Détecter le scroll d'une div

Version imprimable

30/05/2015, 11h48
etienne31

Détecter le scroll d'une div

Bonjour.

Voici mon problème. J'ai créer une div scrollable (c'est a dire que je ne scroll pas la page mais bien la div). J'ai reussi a detecter le fait d'arriver au top de la div. Par contre, en jquery, le scrollBottom n'existe pas. J'ai donc fait des recherche sur internet pour trouver enfin qu'il est possible de detecter le fait d'arriver en bas de la page par le scroll à l'aide de $('window').height(). Cependant meme en faisan tous les remplacement necessaire (remplacer le 'window') par mon element que je scroll), la valeur de $('monelement').height() est défini par la hauteur de la div et ne comprend pas le scroll dans cette hauteur. Du moins j'en ai l'impression. Y a t-il une solution a ce problème ? N'hesitez pas à me prévenir si vous ne me comprenez pas ou si je ne suis pas assez clair, merci

Bonne journée !
30/05/2015, 13h41
NoSmoking

Bonjour,
as tu eu la curiosité de mettre une valeur négative qui par exemple serait la hauteur de ta DIV ?

Code:

$( 'ma_div' ).scrollTop( - hauteur_de_la_div);

EDIT : mettre une valeur négative n'a aucun sens, 1000 excuses
30/05/2015, 16h24
etienne31

Reponse

Bonjour, malheureusement cela ne fonctionne pas. J'ai été voir sur la doc jquery car de plus je ne comprend pas ce que cela apportais d'entrer un argument à la fonction "scrollTop()" et j'ai pu voir que la fonction n'acceptait aucuns arguments...
30/05/2015, 16h40
NoSmoking

Citation:

J'ai été voir sur la doc jquery car de plus je ne comprend pas ce que cela apportais d'entrer un argument à la fonction "scrollTop()" et j'ai pu voir que la fonction n'acceptait aucuns arguments...

on ne doit pas avoir la même documentation ► .scrollTop( value )

Exemple

Ceci n'est pas mon code mais il représente bien ma situation (je l'ai copié depuis la doc jquery puis je l'ai adapté pour représenter mon cas), ainsi, si vous essayer ce code, vous verrez bien que la hauteur de la div ne varie pas quelque soit la hauteur du scroll à l'interieur. alors que si la fenetre est scrollable, la hauteur de 'document' varie. En gros, la hauteur de ma div donne le même effet que si je voulais avoir la hauteur de 'window' (le scroll n'est pas prit en compte)
Voila le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height demo</title>
  <style>
  body {
    background: yellow;
  }
  button {
    font-size: 12px;
    margin: 2px;
  }
  p {
    border-radius:10px;
    position:fixed;
    top:60px;
    bottom:7px;
    left:50%;
    width:90%;
    margin-left:-45%;
    box-shadow: 8px 0 8px -10px white,-8px 0 8px -10px white;
    overflow:scroll;
    background-color: #202020;
  }
  div {
    color: red;
    font-weight: bold;
    
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="getp">Get Paragraph Height</button>
<button id="getd">Get Document Height</button>
<button id="getw">Get Window Height</button>
 
<div>
    <p>oefbdcxc</p>
    <p>oefbdcxc</p>
    <p>oefbdcxc</p>
    <p>oefbdcxc</p>
    <p>oefbdcxc</p>
</div>
<p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
  Sample paragraph to test height
</p>
 
<script>
function showHeight( element, height ) {
  $( "div" ).text( "The height for the " + element + " is " + height + "px." );
}
$( "#getp" ).click(function() {
  showHeight( "paragraph", $( "p" ).height() );
});
$( "#getd" ).click(function() {
  showHeight( "document", $( document ).height() );
});
$( "#getw" ).click(function() {
  showHeight( "window", $( window ).height() );
});
</script>
 
</body>
</html>

30/05/2015, 22h49
NoSmoking

Tout d'abord et à la relecture de la discussion je ne sais pas pourquoi je t'ai indiqué de mettre une valeur négative en paramètre ce qui n'est pas cohérent avec la fonction :fessee:!

Citation:

Ceci n'est pas mon code mais il représente bien ma situation...

vu la structure, peu académique, de ton HTML je me demande si j'ai bien compris ce que tu cherchais à faire, scroller quoi au juste ?

Réponse

Bonjour,

je vais réessayer d'expliquer mon probleme de manière différente:

-Tout d'abord, le but recherché est d'ajouter une classe a une div au moment où l'utilisateur à scrollé tout en bas de la div (que j'ai elle même rendu scrollable grace à "overflow:scroll" en css).

-Vous devriez surement savoir qu'en jquery, il existe la fonction scrollTop(), mais malheureusement pas de fonction scrollBottom(). Ainsi, pour detecter lorsque l'utilisateur à scrollé tout en haut de la div, j'ai le code suivant (qui fonctionne) :
#containerecoute est l'id de ma div "scrollable".
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 var positionElementInPage = $('nav').offset().top; $('#containerecoute').scroll( function () { if ($('#containerecoute').scrollTop() >= positionElementInPage) { $('nav').addClass("scrolled"); $("#menu").hide(); } else { $('nav').removeClass("scrolled"); $("#menu").show(); } } );
-Maintenant, j'aimerais pouvoir effectuer la même chose mais à l'inverse, pouvoir détecter lorsque l'utilisateur a scrollé tout en bas de ma div. Comme la fonction scrollBottom() n'existe pas, j'ai fait des recherches. J'ai vu qu'une manière simple pour détecter cela était d'effectuer ce code:
Code:

1 2 3 4 $.fn.scrollBottom = function() { return $(document).height() - this.scrollTop() - this.height(); };
Mais .. Parce qu'il y a toujours un mais, soit je ne comprend pas la fonction, soit j'ai un problème pour récuperer la hauteur de ma div ... M'enfin, pouvez vous dans un premier temps m'expliquer la fonction? car quand je fais ...
Code:

1 2 console.log($('containerecoute').scrollBottom());
.. je m'attend a retrouver la valeur 0 lorsque je scroll tout en bas de ma div .. Mais non, je récupère une valeur négative ...
Le lien où j'ai pu trouver cette fonction : ici

En fait, je pense que je sais le problème: j'imagine que cette fonction ne fonctionne pas car on récupèere la hauteur de 'document'. hors, il me faudrait la hauteur de ma div (SCROLL COMPRIS, j'insiste bien sur ce fait pour une meilleure compréhension, je voudrais la hauteur de tout ce qu'il y a A L'INTERIEUR DE LA DIV), mais si je remplace '$(document).height()' par '$("#containerelement").height()', je récupère la hauteur de la div et NON la hauteur de TOUT CE QU'IL Y A A L'INTERIEUR DE LA DIV.

Merci pour vos réponse, j’espère être le plus clair possible.

On ne peut pas déterminer le scroll maximum à partir de la hauteur des éléments du DOM.

La seule manière de l'obtenir est de le mesurer après le chargement de la page.

Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta http-equiv="cache-control" content="public, max-age=60">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="author" content="Daniel Hagnoul">
    <title>Test</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
    <style>
 
#demo {
    background: #ccc none repeat scroll 0 0;
    border: 3px solid #666;
    margin: 5px;
    padding: 5px;
    position: relative;
    width: 200px;
    height: 100px;
    overflow: auto;
}
#demo p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
    width: 1000px;
    height: 1000px;
}
 
    </style>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        "use strict";
 
$( function(){ // forme abrégée de $(document).ready(function(){
 
});
 
$( window ).load( function(){
 
    // valeur max du scroll après chargement de la page
 
    $( "#demo" ).scrollTop( 999999 );
 
    var scrollMax = $( "#demo" ).scrollTop();
 
    $( "#demo" ).scrollTop( 0 );
 
    $( "body" ).prepend( "<p>scrollMax = " + scrollMax + " px.</p>" );
 
    // tests
 
    function showHeight( element, height ){
        $( "#height" ).append( "<p>La hauteur de " + element + " est de " + height + "px.</p>" );
    }
 
    showHeight( "#demo height", $( "#demo" ).height() );
    showHeight( "#demo innerHeight", $( "#demo" ).innerHeight() );
    showHeight( "#demo outerHeight", $( "#demo" ).outerHeight() );
 
    var h = 0,
        hi = 0,
        ho = 0;
 
    $( "#demo" ).children().each( function( i, item ){
        h += $( item ).height();
        hi += $( item ).innerHeight();
        ho += $( item ).outerHeight();
    });
 
    showHeight( "#demo children height", h );
    showHeight( "#demo children innerHeight", hi );
    showHeight( "#demo children outerHeight", ho );
 
    $( "#demo" ).on( "scroll", function( ){
        $( "#scroll" ).text( "scrollTop div demo " + $( this ).scrollTop() + " px." );
    });
 
    $( "#demo" ).scrollTop( 300 );
 
});
    </script>
</head>
<body>
 
<div id="scroll"></div>
 
<div id="demo">
    <h1>lalala</h1>
    <p>Hello</p>
</div>
 
<div id="height"></div>
 
</body>
</html>

Resolu

Bonjour, je vous remercie beaucoup pour votre aide, cela fonctionne ! Cependant entre temps j'ai trouvé une solution. Je vous donne le code pour vous montrer, finalement cela ne prend pas beaucoup de ligne de code, c'est assez simple de recuperer la hauteur de tout ce qui se trouve à l'interieur de l'élément, mais pas possible avec la fonction .height() de jquery:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var containerheight = $('#containerecoute')[0].scrollHeight; // Ceci est la ligne permettant de récuperer la hauteur du scroll à l'interieur de ma div ayant l'id "containerecoute"
 
//Je définis ensuite la fonction permettant de récupérer le "scrollbottom" de la div (valeur = 0 lorsqu'on arrive tout en bas de la div)
$.fn.scrollBottom = function () {
    return containerheight - this.scrollTop() - this.height();
};
 
// je définit ensuite la position de mon footer par rapport au bas de la page (il est en position fixed, j'utilise donc cette fois la hauteur de mon container à l'aide de la fonction height() de jquery et à ca je soustrait le nombre de pixel qu'il y a entre le haut de la page et le footer
var positionfooterInpage = $('#containerecoute').height() - $('#footer').offset().top;
 
 
// Ici je cache mon footer par défaut car sinon il reste affiché tant que je ne scroll pas (normal..)
$('#footer').hide();
// Ici je montre mon footer par défaut si ma div ne contient pas assez de contenu pour pouvoir scroller (ainsi ma fonction à l'interieur de l'evenement scroll ne se declencherait pas et je ne verrais jamais mon footer)
 
if ($('#containerecoute').scrollBottom() === 0) {
    $('#footer').show();
}
 
// Voici ensuite la fonction qui se déclenche lorsque je scroll .. Qui affiche le footer lorsque j'arrive à l'endroit désiré (le bas du scroll)
$('#containerecoute').scroll(
        function () {           
            if ($('#containerecoute').scrollBottom() >= (positionfooterInpage)) {
                $('#footer').fadeOut('fast');
            } else {
                $('#footer').fadeIn();
            }
        }
);

J'ai essayé d'expliquer au mieux et j'espere que cela aidera quelqu'un, ce n'est pas compliqué avec un peu d'acharnement... merci !