Ion-scroll: You can scroll down too much

1

I am using ion-scroll but I can scroll down too much so that the content within in the scrollable container gets hidden. See this CodePen and try to scroll down as much as you can.

Any ideas how to fix it?

2

Trying to combine an ion-content with and ion-scroll directive isn’t really recommended. Would this work for you?

3

Thanks for your answer. Unfortunately it isn’t working for me. In my case the height of the div.myheader can change. Therefore, a fixed top-position in .has-myheader class doesn’t work.

4

Seems that this is an issue in 1.0 beta 1, I updated the codepen to use the nightly and things work great.

5

Even with the nightly it is not working for me. I can’t scroll down to the latest items. Here is a plunk

6

@gkielwasser I’m sorry, I’m not sure I understand your problem? What do you mean you can’t scroll down to the last item? Item 34 is the last item

7

If I reduce the messages area so that we can’t see all items, the scroll is not working.

8

The problem is that you get this error :

Delegate for handle "messagesScroll" could not find a corresponding element with delegate-handle="messagesScroll"! resize was not called!

However, nothing seems wrong with your code. @mhartington : Any ideas on the delegate handle not being found?

9

@Calendee not to sure about that, may have to chime in @andy since he re-implemented the delegate handling system.

But as far being able to get to work and be abel to scroll to the bottom, I came up with css based solution that should work. @gkielwasser how does this work for you?

10

We are again running into the problem of controllers. The problem is that MyCtrl is compiled before the ion-scroll element is compiled. Therefore, when MyCtrl is first run, the ion-scroll element cannot be found.

You can put a $timeout around the $ionicScrollDelegate commands to fix this. And you only ned to call those things once.

11

Perhaps we need to add a hint to the error message, as well.

Delegate for handle "messagesScroll" could not find a corresponding element with delegate-handle="messagesScroll"! resize was not called!
Possible cause: If you are calling resize immediately, and your element with delegate-handle="messagesScroll" is a child of your controller, then your element may not be compiled yet. Put a $timeout around your call to resize and try again.
12

@mhartington Perfect, everything work as expected with your css solution, Thanks!

@Calendee I didn’t notice the hint in the codepen because It didn’t show in my real application (don’t kow why).

@andy The timeout solved the compilation issue!

Here is my codepen updated.

13

I am experiencing this issue as well. The ion-content scrolls what appears to be an additional height of the window.

15

My issue was caused by having position: relative on the ion-content element. Removing that style resolved the issue.

16

@ilo @gkielwasser @mhartington @cauboy I don’t know how I can solve this. http://codepen.io/danicomas/pen/gbmvEm (emulate with mobile I can see the last item completely)

17

Solved. Using rows and cols!!!

18

@mhartington same issue with me i use your codepen example but not working on android device still scrolling all???