asmyshlyaev177/react-horizontal-scrolling-menu

Scroll item to center but don't scroll the whole page so the item is in view.

Closed this issue · 4 comments

Is your feature request related to a problem? Please describe.
I'm not frustrated, just asking if it's possible. Maybe I've missed something in the docs.

Describe the solution you'd like
I have an image row in a slideshow, like so
image
I would like to center the currently selected image in a row, but cannot figure out how to keep the slideshow running with centered image without it scrolling the page to the image every time.

Describe alternatives you've considered
Maybe not to scroll the image row at all if it's not in view, but keep the slideshow running.

Can you provide a code example?

This is the function that handles scrolling, I'm using my own since it's similar to the one in the lib, but I had it already

image

This is the relevant part of the component

image

I've implemented to only scroll images into view once the user scrolls to the Images Row div, and to stop the scroll once the Images Row leaves the view.

scrollIntoView will always scroll element into view.
Can detect if whole block is visible on the page with hooks like this https://usehooks-ts.com/react-hook/use-intersection-observer

Yeah, I got that. I already have the hook that servers that purpose. I was just wondering if it was possible to let it run in the "background", without scrolling the Y axis.

Thanks anyways, this is a fine solution.