CSS Scroll Snap Points

ionic-v1
1

Hey Guys,

is there a way to use CSS Scroll Sap Points in an ionic-content or ion-scroll? Something like this:

-webkit-scroll-snap-type: mandatory;
-webkit-scroll-snap-points-y: repeat(100%);

I would like to have some vertical fullpage-scroll in a ion-slide-page (using horizontal ion-slides).

Any help is HIGHLY appreciated

2

Probably not in V1, since it uses js-scrolling, but in theory, this could work for V2

3

Thanks @mhartington , but I thought that

[overflow-scroll=""]

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?

<ion-scroll zooming="true" direction="y" scrollbar="false" paging="true" style="width: 100vw; height: 100vh">
<div style="width: 100vw; height: auto">
	<div class="slide">
		<p>Content 1</p>
	</div>
	<div class="slide">
		<p>Content 2</p>
	</div>
	<div class="slide">
		<p>Content 3</p>
	</div>
</div>
4

@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:

  <ion-content overflow-scroll=”true” class="slide" scroll="false">
      <div class="red">Red</div>
      <div class="green">Green</div>
      <div class="blue">Blue</div>
      <div class="red">Red</div>
  </ion-content>

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:

-webkit-scroll-snap-points-y: repeat(calc(100vh - 44px));

Than for testing purposes do the same on your DIVs:

.red {
color: white;
display: flex;
align-items: center;
justify-content: center;
height: calc(100vh - 44px);
background: red;}

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:

5

Was a bit too enthusiastic here :wink: 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.

Here is a codepen with the slider example:

6

@mhartington continuing the jurney… :wink:

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 :slight_smile: 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…