will activate native scrolling instead of the js-scrolling. If this is the case: do you have any hint how this could be achieved? And what would you do in V2 to make this happen?
Thanks!!
EDIT
In the mean time I am using an ion-scroll, but the paging does not feels really native. Are there any trick i could use I that case?
@mhartington – Hey Mike, never mind – I have figured out a solution for this (Ionic1) and it is working very nicely. The “trick” was simply to set the content to native scroll and to disable scrolling:
Than in the CSS define the scroll-snap to the ion-content. We need also -webkit-overflow-scolling: touch;…
.slide {
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
-webkit-scroll-snap-type: mandatory;
-webkit-scroll-snap-destination: 100% 0%;
-webkit-scroll-snap-points-y: repeat(calc(100vh - 44px));}
Was a bit tricky to fugure out the snap-point, but it is actually also simple. Just substract the height of the header from the viewports height:
Now we have some cool fullpage snapped scrolling in ionic independent of the slide component. Next thing would be to test this in a horizontal slider – this could solve some of the (my) problems with nested sliders.
I have not tested this on Android and I think Chrome needs also a Polyfill, but It is working on Safari and iOS…
Here is a little codepen – it was not working with the Ionic nightly (whyever), so I used CDN instead:
Was a bit too enthusiastic here I have put together a slider scenario (this is what I actually need). It is turning out that there are some problems:
– I am puting the vertical scroll point example in the first page of my horizontal slider
– working fine until i change the slide to page two
– going back to page one and I am not able to scroll the contents (in Safari)
– changing the sliders pages and going back to the first page on iOS is working
– putting the vertical scroll point example in any other slide fails on Safari and iOS
Hope that somebody has an ide what’s happening there. Would be really pretty cool to get this working.
Made some further testing over the weekend. I modifyed my last codepen and it is turning out that puting the vertical scroll point example in the first slide is crucial. Having it there, allows also to use it also in other slides. So putting at least two of the DIVs in the first slide will enable sliding on the following slides. Curiously having only two DIVs in the slide will not snap. It needs at least 3 DIVs to snap correctly.
Unfortunately here is the point where my knowledge stops So I can only suspect the following:
When the slider creates the slides, the first slide will determine the height/overflow also of the the following slides. So if the first slide ist too “short” the next slide will not work…
Anyhow, maybe one of you guys is knowing really what’s going on there…
BTW: the codepen is working perfectly on iOS as it is…