jQuery window scroll event does not fire up
JqueryWindowScrollJquery Problem Overview
I'm trying to implement a simple "stay inside the viewport" behaviour to a div via jquery. For that i need to bind a function to the scroll event of the window, but i can't seem to get it to fire up: nothing happens. I've tried a simple alert(), console.log() no dice. An idea what i'm doing wrong?
This code :
$(window).scroll(function () {
console.log("scrolling");
});
sits in script.js, located at the very bottom of my html file
<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 Test URL: http://pixeline.eu/test/menu.php
Jquery Solutions
Solution 1 - Jquery
Your CSS is actually setting the rest of the document to not show overflow therefore the document itself isn't scrolling. The easiest fix for this is bind the event to the thing that is scrolling, which in your case is div#page.
So its easy as changing:
$(document).scroll(function() { // OR $(window).scroll(function() {
didScroll = true;
});
to
$('div#page').scroll(function() {
didScroll = true;
});
Solution 2 - Jquery
My issue was I had this code in my css
html,
body {
height: 100%;
width: 100%;
overflow: auto;
}
Once I removed it, the scroll event on window fired again
Solution 3 - Jquery
$('#div').scroll(function () {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight-1) {
//fire your event
}
}
Solution 4 - Jquery
The solution is:
$('body').scroll(function(e){
console.log(e);
});
Solution 5 - Jquery
To whom its just not working to (like me) no matter what you tried:
<element onscroll="myFunction()"></element>
works like a charm
exactly as they explain in W3 schools https://www.w3schools.com/tags/ev_onscroll.asp
Solution 6 - Jquery
Nothing seemd to work for me, but this did the trick
$(parent.window.document).scroll(function() {
alert("bottom!");
});
Solution 7 - Jquery
In my case you should put the function in $(document).ready
$(document).ready(function () {
$('div#page').on('scroll', function () {
...
});
});
Solution 8 - Jquery
- Declare your
jQuerybetween<script>and</script>in the<head>, - Wrap your
.scroll()event within
$(document).ready(function(){
//do something
});