is there any better solution,i also tried to use slick carousel but still i face the same issue
I searched for almost two days, and finally landed at this solution. I didnāt find any solution better than this.
anyways thank you. 
Confirmed, still works in v1.1.0
@andmar8 I kind of lose touch of which solution is confirmed to be still working. Is it the solution in this codepen http://codepen.io/walm/pen/wBoReG?
Thanks.
Iām using @bra1n 's solution but like @ferryfax 's app, my app would be based on many horizontal scrolling images.
The navigation is kind of messy and frustrating. 
Bra1nās solution:
ignoreScrollStart: function(e) {
return //(e.defaultPrevented) || // <-- comment out this first condition to have scroll events bubble u
Works perfectly
As I said, Iām using Bra1nās solution, but itās not so perfect.
When you try to scroll in x-direction the page scrolls in y-direction too. Itās impossible to scroll left without page scrolls vertically.
Thatās the trade you make
After trying a few of the solutions listed here, my solution was to abandon ion-scroll all together and set overflow-scroll=true on the ion-content and then use a standard ul with the properties:
overflow-x: auto;
overflow-y: hidden ;
white-space: nowrap;
I actually noticed better performance on Android when I didnāt use ion-scroll. And I could still scroll both vertically and horizontally and it performed exactly as expected.
@DaDanny Do you have a codepen example? Iām dying to have a solution for this issue.
Sure, Iāll try and put up an example this evening, just need to take care of a few things first.
In the mean time, what exactly are you stuck on so I know what to point out.
@DaDanny Iām interested to see how your solution is different from the original solution. The original solution didnāt work well for me for various reason, like horizontal scroll is not locked when scrolling up and down, getting multiple horizontal scroll regions to work is also quite tricky.
Sorry about the delay, working on a codepen now 
Heres my example.
You can basically ignore anything I do in the controller. Youāll see Iām doing nothing fancy, just setting up a bunch of cards, and adding images to each card to show my solution.
What I would look at is how I did the horizontal scrolling. Instead of using ion-scroll with direction=āxā, I used a ul and ng-repeat for each image. To make the ul scroll horizontally instead of vertically, you can use these properties:
overflow-x: auto;
overflow-y: hidden ;
white-space: nowrap;
I had to open Chrome Dev tools and emulate an iOS device to get the click to scroll events to work, but in an app, you wonāt have any trouble.
In my app, Iām able to have hundreds if not thousands of images and cards, with no performance issues on iOS and Android. (Iām also using crosswalk for Android). Its seriously smooth as butter. But when I tried ion-scroll, sometimes Iād get a weird flashing when I would scroll on Android, but not with this solution.
Also, make sure you donāt change the z-indexās for any of the images. When I tried that, it seemed like they were detached from the parent element, and I saw weird behavior on scroll events on BOTH ios and Android.
I hope this solution helps you out. Let me know if you have any trouble.
Edit:
Also, with ion-scroll, I noticed that if you tapped inside the horizontal scroller, you were no longer able to scroll up and down, which was super annoying.
If you want to get it so you can touch to scroll without opening Chrome Dev tools, youāll need to copy the code from the original solution up until the suggested Horizontal Scroll Fix. I just didnāt find this necessary as it works great on iOS and Android, so why add code you donāt need?
2 Likes
@DaDanny Thank you for putting this codepen together. Itās very useful and in my opinion, this seems to be a cleaner and better solution without involving adding much code.
I tried to play around with the example and find that if I remove overflow-scroll from ion-content or set it to false because I want to get the pull and bounce back effect, horizontal scrolling doesnāt work anymore.
Did you see the same behavior on iOS or Android? I havenāt incorporated your example into my project and tested it out yet.
Are you talking about also having a āpull-down to refreshā at the top of the page?
@DaDanny Not sure I did previously to break your example. But I forked and added <ion-refresher> to it. Everything seems to work perfectly.
Again, thank you for providing the example. Itās exactly what I was seeking for a long time.
Hmmmā¦ that definitely complicates things haha.
I messed around for a little bit but couldnāt get it working. Iād try using two ion-contents, one within the other. The outermost one has the ion-refresher and the inner ion-content has the cards (from the example). But when I tried this, you canāt scroll horizontally.
Sorry I couldnāt help you out with that one.
Danny
Thatās definitely a bummer 
Iāve been struggling with this issue for quite some time.