I’m using ion scroll for showing images in a horizontal layout (direction=“x” ). I used this example codepen example. It works fine but my problem is that my images are almost taking the whole height of the mobile screen. What happens now is that I can’t scroll down the page. You can try it as well with the link above, it’s easy to scroll horizontal but if you want to scroll the page down by draging an element in the horizontal ion scroll nothing happens. Is there any way to solve this problem? direction=“xy” doesn’t help it only lets me drag the elements in ion scroll up and down but not the page itself.
2 Likes
try:
direction="['x','y']"mh… no still not working
When I add that to your codepen, a y scroll bar appears and I can move in both directions…
what code are you actually using?
Okay, now I understand your issue. The ion-scroll directive you are using is in the header.
If you want the content to be scrollable, you need to use the ion-scroll directive again instead of ion-content.
Additionally, the toggle button you have is not visible when you change ion-content to ion-scroll because it is behind the sub-header.
Alternatively, you could use:
<ion-content overflow-scroll="true">
</ion-content>
But I have personally had issues with this on Android and creating custom pinch gestures.
I made a fork of it with images. myCodepen If I use xy I can move the content in the ion scroll but I want to scroll the whole page when scrolling up and down in the ion scroll. Use mouse click to scroll (simulate touch on mobile). Do not scroll your mouse wheel or your use scroll gesture.
edit: had to fix url… think it is fixed, but let me know if you cant see it.
Still can’t get it to work. Please try it with this codepen example http://codepen.io/romanrast/pen/lwsBI
When you put your mouse curser over one of the images 350x390 and then try to click and drag the page to scroll down to reach the page bottom it wont work. But clicking and draging in the area where “This is normal content scrollable” is written it scrolls. If it helps I can also upload a video showing my problem.
Note that I tweaked the ‘wide-as-needed’ class
I’m realy glad you’re trying to help me, I was trying all night long but it’s still not working. Also not with your latest edit. So her are three videos showing what I’m trying to achieve and how it is at the moment.
In the first video I’m scrolling horziontal and then touching in the same area to scroll the page down. That’s what I’m trying to do with Ionic, but with Ionic it seems to ignor the scroll gesture for scrolling the whole page.
2.Codepen solution video not scrollable
Looking forward to your reply.
here is the same problem Horizontal scroll problem
no one has a solution for this problem. i hope in the next beta or stable version will fix it.
Thanks for your link. That’s exactly my problem. I need this function very badly for may app. Hope there will be a solution asap.
I am not sure of your exact intentions as far as functionality with the horizontal scroll section, but you can get the functionality that you had in the video using just css and a div instead:
I have personally tested this on iOS 7.1 and android 4.4
The issue is the fact that ion-scroll onScroll event doesn’t actually bubble up to its parent. This could be achieved if the onScroll directive attribute actually returned information related the the scroll taking place, but it appears that currently, no information is passed into the onScroll event. Alternatively, if there was functionality added to the ion-scroll directive that would allow its events to bubble up, that would be ideal.
I will ponder on how exactly to implement this when I have a bit more time to play with it.
EDIT: I take that back about the bubbling… it is actually bubbling, but not triggering the scroll for some reason -__-
6 Likes
Hey thanks allot!! This works!! Great help!
But there’s a new issue now with saving scroll position of the page. When I navigate to a subview where it’s parent view has your code solution in it and go back the leaving scroll position is always set to the top of the page. Do you experience the same?
hello guys … i faced this problem too. It’s done by @jcsmith1859 using <ion-content overflow-scroll="true" > .
But i wanna stick with <ion-scroll> because i need the pinch-zoom feature like this.
<ion-scroll direction="xy" zooming="true" min-zoom="1" paging="true">
Is anyway to do it, or you have another alternative ?
thanks
Can anyone figure this out please? I can’t get horizontal scroll with vertical parent to work. I understand horizontal gets locked but needs to bubble up for vertical scroll.
Here’s a demonstration of the problem: http://codepen.io/anon/pen/BoGkA
A solution is included, if you remove the “return false;” line from the controller, it will override the “preventDefault”-code that keeps the scroll events from bubbling up through the dom to the parent scroll container.
At least it works for the demonstrated situation, maybe it will help someone else, too. 
1 Like
Hey bra1n,
Your solution works but only if you have one horizontal scrolling container on a page. In case of multiple horz. containers, the first one works. The rest have the same problem.
Any idea how to extend to the rest of them?
Thanks!
Sal
Did you assign each of your horizontal scroll containers a different delegate-handle? If so, you need to loop over all handles and adjust this line: $ionicScrollDelegate.$getByHandle('<insert handle name here>').getScrollView(). But I did notice that the solution with the replaced events does not actually work on native Android apps (ie. in a Cordova webview). For some reason, the only way to fix it there was to monkey-patch a line in the ionic.bundle.js:
ignoreScrollStart: function(e) {
return //(e.defaultPrevented) || // <-- comment out this first condition to have scroll events bubble up
I opened a ticket for this issue, hopefully it will be adressed in the near future. 
3 Likes