asmyshlyaev177 / react-horizontal-scrolling-menu

Horizontal scrolling menu component for React.
https://www.npmjs.com/package/react-horizontal-scrolling-menu
MIT License
766 stars 98 forks source link

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

Closed nzmnisam closed 5 months ago

nzmnisam commented 5 months ago

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.

asmyshlyaev177 commented 5 months ago

Can you provide a code example?

nzmnisam commented 5 months ago

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.

asmyshlyaev177 commented 5 months ago

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

nzmnisam commented 5 months ago

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.