What is the meaning of the paging attribute in ion-scroll

1

Hi all,

I tried to understand what the paging attribute means in the ion-scroll directive at:
http://ionicframework.com/docs/api/directive/ionScroll/

The documentation writes “Whether to scroll with paging”.
I don’t understand what this means.

Thanks,
David

2

I clicked a little bit through the source code.
It sets the scroll-bouncing to false, added a scrollspeed factor of 0.8.

But it is not used in other ways.

maybe this is a part of a future functionality.
Something like anchor-scroll - that you have a view you can set up “pages” and get a navigation to slideup-down to next/prev page?

@mhartington maybe you can clearify.

3

It lets a user scroll though a list, in a paginated way

http://zynga.github.io/scroller/demo/dom-paging-y.html
http://zynga.github.io/scroller/demo/dom-paging-x.html

We’re trying to mess with this for some slide-box refactoring

2 Likes
4

Does this work yet?

I would like to use it and so far unsuccessful.

5

Not yet, this is part of the slide-box rework that we are doing. A small piece of the big puzzle :wink:

6

I actually got it to work. The has-bouncing doesn’t work (yet?). Unfortunately, I am looking for a way to snap to the next item on the list while still showing a bit of the next item below it. Instead this just does paging (the whole page) which is what the intention is, however I can’t seem to find a solution to my current problem other than writing it all.

Any ideas where I can find a snap to element type paging where part of the next item/page shows?

7

You could build your own directive for that.

$ionicScrollDelegate has a method -> anchorscroll where you can scroll to any tag with an id on the page.
You could listen on touch move of your ion-content or ion-scroll and do something like this:
if the next/previous dom-node with an page id is in the viewport and your scrolling upwards/downwards (you get the coords in your touchmove event). Than you can set a limit like “your dom node is visible and you have scrolled 200px in the correct direction” -> do an anchor scroll in that direction to the next element (“page”).

1 Like