web-dev-qa-db-fra.com

l'événement de défilement de la fenêtre jQuery ne se déclenche pas

J'essaie d'implémenter un comportement simple "rester dans la fenêtre" à une div via jquery. Pour cela, je dois lier une fonction à l'événement scroll de la fenêtre, mais je n'arrive pas à l'obtenir: rien ne se passe. J'ai essayé une simple alerte (), console.log () sans dés. Une idée de ce que je fais mal?

Ce code:

$(window).scroll(function () {  
            console.log("scrolling");           
});

se trouve dans script.js, situé tout en bas de mon fichier html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

UPDATE URL de test: http://pixeline.eu/test/menu.php

jquerywindowscroll
39
pixeline

OK, ça a fonctionné.

En réalité, votre CSS configure le reste du document de manière à ne pas afficher de débordement. Le document lui-même ne défile pas. la solution la plus simple consiste à lier l'événement à l'élément en train de défiler, qui dans votre cas est div # page.

Donc c'est simple comme changer:

$(document).scroll(function() {  // OR  $(window).scroll(function() {
    didScroll = true;
});

à

$('div#page').scroll(function() {
    didScroll = true;
});

À votre santé
Charlie

97
Charlie Sheather

Mon problème était que j'avais ce code dans mon css

html,
body {
    height: 100%;
    width: 100%;
    overflow: auto;
}

Une fois que je l'ai enlevé, l'événement de défilement sur la fenêtre s'est déclenché à nouveau

25
digitalzoomstudio
$('#div').scroll(function () {
   if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight-1) {

     //fire your event


    }
}
3
Ashish Asodiya

Pour qui cela ne fonctionne tout simplement pas (comme moi), peu importe ce que vous avez essayé: <element onscroll="myFunction()"></element> fonctionne comme un charme

exactement comme ils l'expliquent dans les écoles W3 https://www.w3schools.com/tags/ev_onscroll.asp

0
mallocthePD

La solution est:

 $('body').scroll(function(e){
    console.log(e);
});
0
Pan Bouradas

Rien ne semblait fonctionner pour moi, mais cela a fait l'affaire 

$(parent.window.document).scroll(function() {
    alert("bottom!");
});
0
LegionDev