Programmatically determine the DOM element to add the 'scroll' listener to

Question

I'm writing a Firefox add-on and most of the time using

document.addEventListener("scroll", scrollListener, false);

works just fine. However on cuil.com that doesn't work. Basically any site that has a fixed header or footer that doesn't scroll causes a problem with the above code. How do I determine which element to add the event listener to?

Answer 1

Using

document.addEventListener("scroll", scrollListener, true);

works. The event listener gets called. I still had to get the root element to get the scroll values from. In my case I had a descendant element to begin with. Anyway, here's part of the code I used in my onScroll function.

if(!x.scrollObj){
 x.scrollObj = x.doc;
 var scrollObj = x.bElem.parentNode;
 while( scrollObj && scrollObj.nodeName != 'BODY'){
  var overflowY = x.doc.defaultView.getComputedStyle( scrollObj, null ).overflowY;
  if(  overflowY == 'auto' || overflowY == 'scroll'){
   x.scrollObj = scrollObj;
   break;
  }
  scrollObj = scrollObj.parentNode;
 }
}

var w = x.doc.defaultView;
var scrollY = w.scrollY, scrollHeight = x.doc.body.scrollHeight;
if( x.scrollObj&& x.scrollObj != x.doc ){
 scrollY = x.scrollObj.scrollTop;
 scrollHeight = x.scrollObj.scrollHeight;
}

I had tried determining the scrollObj before setting up the onScroll function, but in cuil.com, they actually set up the overflow later.