CODEWITHSUNDEEP
jqueryscroll
clankill3r
clankill3r

Reputation: 9533

How do I detect scroll with jQuery?

I scroll with this which works fine:

$("body").animate({ scrollTop: $("body")[0].scrollHeight}, 1000);

But I would also to like to detect when I scroll the page myself.

I tried all of these:

$('window').on('scroll', function (e){
  console.log("scroll");
});

$('#historyScroll').on('scroll', function (e){
  console.log("scroll");
});

$('body').on('scroll', function (e){
  console.log("scroll");
});

$('document').on('scroll', function (e){
  console.log("scroll");
});

$('window').on({'scroll' : function (){
  console.log("scroll");
}});

$('#historyScroll').on({'scroll' : function (){
  console.log("scroll");
}});

$('body').on({'scroll' : function (){
  console.log("scroll");
}});
 $('document').on({'scroll' : function (){
  console.log("scroll");
}});


 $('window').on('scroll', function (){
  console.log("scroll");
});

  $('#historyScroll').on('scroll', function (){
  console.log("scroll");
});

 $('body').on('scroll', function (){
  console.log("scroll");
});

 $('document').on('scroll', function (){
  console.log("scroll");
});

But nothing gets logged. What can I do to figure out why it isn't working?

See also demo on JS Fiddle.

Upvotes: 2

Views: 123

Answers (3)

ggdx
ggdx

Reputation: 3064

$(document).scroll(function(){
  //Whatever on scroll
});

Working Demo

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128771

Simply remove the single quotes around window or document in your selector:

$(window).on('scroll', function() { ... });
// Or...
$(document).on('scroll', function() { ... });

Both window and document are default JavaScript objects. Using $('window'), for example, attempts to select a <window> element within your document.

Upvotes: 4

Albzi
Albzi

Reputation: 15609

JSFiddle

You want to try 

$(document).scroll(function(){
  //code here
});

You tried:

$('document').on({'scroll' : function (){
  console.log("scroll");
}});

and was close, but you need to remove the ' from the selector and the { and : from the scroll function.

Your version would make jQuery look for a HTML element called <document> (which doesn't exist). Same as window, you don't use ' with that.

Upvotes: 2

Related Questions