Filmstrip scroll bar issue


#1

Hey guys, having issues with ion-scroll. Take a look at my screencast to get an idea of what’s going on.

<ion-scroll class="video-scroll" scrollbar-x="false" direction="x">
   //..inline image thumbnails..//
</ion-scroll>

#2

Better yet, can you make it a codepen example so we can interact with it?


#3

Well the problem is that it works on a web browser but not in the Xcode simulator or output app… so you won’t see anything wrong with it.


#4

Here’s a plunker of the issue. Never used plunker before though so not sure I did it correctly. :stuck_out_tongue:

http://plnkr.co/Sj2hR2


#5

It’s odd but I removed all the individual js file and just included the bundle js and things worked for me. Give it a try and let me know if it works for you.


#6

Yeah it works. Odd. Any idea why? That bundle file is just a compress of those other ones right?

EDIT: Also not sure it works on the Xcode simulator as my actual project is using the bundled js file.


#7

Yep, I can confirm this does not solve the problem with the Xcode simulator, just tested with the new nightly concatenated JavaScript. So weird.


#8

Not too sure, I’ll get in touch with the devs and see what it could be. It’s a compilation of some of those files.

ionic.bundle.js is a concatenation of:

  • ionic.js, angular.js,
  • angular-animate.js,
  • angular-ui-router.js,
  • ionic-angular.js

So there could be some clashing.


#9

It doesn’t work? Interesting. I know theres been some work done on scrolling so I’ll open up an issue for this. Thanks!


#10

Thanks. Yeah it’s weird because it works in the browser… but not on the device… makes testing a bit trickier.

One thing I have noticed is that you can kinda scroll it right on the very bottom left of the ion-scroll window… maybe a z-index issue with the 3D transform stuff? Also looked like there may be some invisible bottom-margin or something. The scrollbar? Anyway thanks for the help, really loving ionic so far!


#11

I just tried it on the my ios sim and the scroll worked, give it a try now and let me know. There may have been some chance what ever the issue was fixed.


#12

Ah yes I see that. So my original Plunker actually does work now, but take a look at this updated version. It’s closer to my actual use case and you’ll find that the simulator is still not working.

Thank a bunch for all your help on this!


#13

Thanks for provided the more detailed plunker, it helped me figure out the issue knowing that you had a side menu.

Seems to be that the side menu drag event is getting recognized over the horizontal scroll event. I’ll open up an issue for this. Thanks for pointing this out.


#14

Issue submitted


#15

Have you tried drag-content="false" on your ionSideMenuContent directive, or using $ionicSideMenuDelegate.canDragContent(false)?

http://ionicframework.com/docs/api/directive/ionSideMenuContent
http://ionicframework.com/docs/api/service/$ionicSideMenuDelegate

I’d say it’s a bad idea to have horizontal scroll and a side menu.


#16

There we go! Worked great. I still think it’s odd though considering that works fine. Seems like maybe the inner sliders should take precedence over anything underneath it. Still, this will work for now.


#17

Hi guys,

could you explain how you succeed to get it working ?
I’m having the same problem scrolling on x axis with side menus.

I also think that the inner sliders taking precedence over anything underneath would be a good idea.

Or another cool feature for the side menus would be dragging from the edge of the page only to open it.

Any help would be appreciated.


#18

Ok sorry forget about this last post I had an older version of ionic

“version”: “0.9.26”,
“codename”: “rabbit”,
“date”: “2014-02-26”,