Understanding this.y

[Jaume Ferrete]

Hello, I am using iScroll 5.20 and I want to detect if the user reaches top or bottom.

Stack Overflow old answers to this question pointed to the scrollEnd event, but atm this event seems to fire when the user stops scrolling, regardless of position of content. And as iScroll seems to override native scrolling I cannot use events that are not iScroll's.

I tried to use this.y under iScroll's 'scroll' event to get the position and run a custom comparison. As such:

myScroll.on('scroll', function(){
  if(this.y === 0){
    console.log("top reached");
  }
}

It works with 'top' because when content reaches top, this.y always returns '0'.

It does NOT work with 'bottom', because when content is not at top, this.y returns a value that I don't understand. So I can't relate to window height in order to detect bottom

The following are the log of this.y + window width and height. With the scroll always at bottom, I change width and height, but can't understand the relation with this.y.

y: -239 , w: 560 , h: 179
y: -130 , w: 418 , h: 179
y: -414 , w: 803 , h: 179
y: -331 , w: 803 , h: 262
y: -41 , w: 613 , h: 262
y: -64 , w: 388 , h: 221

iScroll is initiated as such:

myScroll = new IScroll('main', {
    scrollbars: 'custom',
    scrollY: true,
    scrollX: false,
    mouseWheel: true,
    probeType: 2,
    indicators: {
        el: 'div#scroll',
        interactive: true,
        listenX: false
    }
});

And styled as such:

body div#scroll {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.5vw;
  background: #000;
}
body div#scroll div#bar {
  background: #fff5f5;
}

My guess is that this.y gives the 'top' position of the scroll 'thumb' on the scrollbar, in relation to the window. Or something similar.

Please light?

[Jaume Ferrete]

Ok I think I understood already. 

this.y refers to the position of content in relation to the window height, so window height - this.y gives the content height (the wrapper height this is)

Thank you.