Detect if the scroll is at bottom / detect scrollview's height

ionic-v1
1

Hello guys,

I want to detect if the scroll is completely at the bottom of the page. For that, I thought about using the scroll position + the window.innerHeight, and to compare it to the full height of the scrollable area, but can’t get that one last data - Scroll delegate doesn’t help for that.

Although, I’m not even sure if it’s the right way to do that.

Any idea ?

Thanks !

[UPDATE] Just to add, if no other way to do it is found, a way to get the scrollview’s height would be great. Thanks !

2

Updated question with more details.

3

Still waiting for help

4

Still waiting for help

5

You can use a directive for that, by putting it to the ion-content.

Did you try this $ionicScrollDelegate.getScrollPosition() ?

6

Hey,

yes I use it, but it gives me the scroll position, doesn’t help to know if it reached the end of the scrollable view. Ths scroll position, added to the innerHeight, is how I get the “position” of the bottom of the page - but since I don’t know how much the scrollview’s height is, it doesn’t help me… And I didn’t find any way to get this data, as stated in my first post !

7

Hi,

I am pretty sure as I said that you can do it by putting a directive on the ion-content. After that you would be able to get the height of your content and where you are on the page (probably by looking the div.scroll, and the css property translate3d)

Best

8

Hey,

using a directive on the ion-content would give me the full height of it when it load, or at a precise moment, if I’m not wrong, but not get that height whenever I need it in the controller, right ? Unless I bind a watcher in the directive and use it whenever I need to get that height ?

9

Try This http://jsfiddle.net/eTTZj/30/

1 Like
10

Find Your Page Height and width
var _docHeight = (document.height !== undefined) ? document.height : document.body.offsetHeight;
var _docWidth = (document.width !== undefined) ? document.width : document.body.offsetWidth;

do the changes based on your requirement in above link.