Jump to content
Search Community

Infinite scroll menu, how can I find the correct center and active item?

clieee test
Moderator Tag

Recommended Posts

Hi,

 

I'm currently working on a "infinite scroll menu" which contains a list of different places, but having a hard time of especially one (maybe two) things that I don't know how to solve in a good way.

 

The menu/list is just a list of x number of places and as the user scrolls the list will update the positions of all the items in it so they go up/down based on direction the user scrolls. On top and bottom of the container there is a gradient overlay so it makes the scrolling values disappear in a nice way (red for now to make it more visible...)

 

1. I dont know how I should solve that the "most visible list item" is vertically centered against the viewport height center?

2. Probably connected to #1: I need to know which list item should be marked as "active/selected" item in the list so I could adjust opacity on the other items, and/or make the active one in a different opacity, color etc..?

 

This is where I am right now: https://codesandbox.io/s/lucid-wind-xkyrt?fontsize=14&hidenavigation=1&theme=dark

Link to comment
Share on other sites

Hey clieee. 

 

4 minutes ago, clieee said:

1. I dont know how I should solve that the "most visible list item" is vertically centered against the viewport height center?

Since you can calculate how tall the screen is you should position all of your items based on the center position (not the top). Then translate they up or down based on that position. 

 

7 minutes ago, clieee said:

2. Probably connected to #1: I need to know which list item should be marked as "active/selected" item in the list so I could adjust opacity on the other items, and/or make the active one in a different opacity, color etc..?

You know the delta of how far someone has scrolled (or the count of how many movements you've made so far depending on how you want to set it up) and the height of each item. It should be pretty easy to calculate the index of the one that should be in the center as such.

  • Like 2
Link to comment
Share on other sites

Thanks.

 

1) Yes, okay. But let's say I offset the container with all items to the center of the viewport, is that what you mean? I'm just thinking how I should make it possible to look good even if the user starts scrolling up right away?

 

2) Yes - will try that.

Link to comment
Share on other sites

1 hour ago, clieee said:

say I offset the container with all items to the center of the viewport, is that what you mean?

That's one way to do it. Another way is to keep the container in the same location but position the elements in reference to the container's center.

 

1 hour ago, clieee said:

how I should make it possible to look good even if the user starts scrolling up right away?

I don't really understand this question. If you're worried about a flash of "unstyled" content you can work around that.

  • Like 1
Link to comment
Share on other sites

Thanks.

 

I've updated it, please have a look here:

https://codesandbox.io/s/lucid-wind-xkyrt?fontsize=14&hidenavigation=1&theme=dark

 

Quote

how I should make it possible to look good even if the user starts scrolling up right away?

If you look at my latest example, the first scroll triggers the items to jump in place, but in order to have that layout from the beginning, should I use "modifiers" on the initial set call as well then? It seems to get a bit off on each scroll then? I'm obviously missing something.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...