tags:

views:

465

answers:

2

How can I detect the number of pixels scrolled in a browser window? I need this to dynamically adjust the height of a 100% height div...

I'm using jQuery.

EDIT: I cannot just use scrollTop() because I'm working with a 100% height div with overflow set to auto. Firefox does not detect browser scrolling due to this, the only thing scrolling is a 100%x100% div...

+3  A: 

use $(document).scrollTop() :

$(document).scroll(function() {
    console.log($(document).scrollTop());
})
David
thanks for you help, but I get nothing in my console. I'm using firefox 3.5.7. Seems like it's not responding to the event
Jorre
in safari and chrome it's triggering the event, not in firefox or IE
Jorre
works fine here: http://jsbin.com/icawo3
David
that works here as well...
Jorre
I think I know what's wrong. I have a 100% height implemented with overflow set to auto. I guess it's not detecting a window scroll but a scroll in the overflowing div, can that be?
Jorre
@Jorre: it sure can. Try replacing `document` with your div's selector.
David
A: 

Allright guys, I found it:

$("div#container").scroll(function() {
         var screenheight = parseInt($(document).height());
         var scrolledpx = parseInt($("div#container").scrollTop());     
         var sum = screenheight+scrolledpx;
         console.log($("div#container").scrollTop());
         console.log("screen: " + screenheight);
         console.log("sum=" + sum);
         $("div.content").height(sum);
})
Jorre