Hello everyone,
I am creating a BooksReader app with Unity. I want to implement a control system similar to the stream page of the YouTube Music app.
There is a vertically scrollable page called BooksPanel, where book categories are listed. The user can scroll this page (BooksPanel) up and down to explore categories and swipe them left or right to discover books.
I added the Vertical ScrollRect component to the BooksPanel object. Inside this object (as a child), I added an empty object called VerticalPage with a Vertical Layout Group component.
In short, the user can scroll the VerticalPage panel up or down with a vertical scroll gesture.
Inside the VerticalPage object, I added a book category called CategoryPrefab. Within it (as a child object), I added an object named HorizontalPage with the Horizontal ScrollRect component.
Inside HorizontalPage, I added an object called BooksSpawnArea and assigned it a Horizontal Layout Group component. This is where I spawn books horizontally.
The user can swipe horizontally on the HorizontalPage (within CategoryPrefab, e.g., Science and Fiction panel) to explore books seamlessly left and right.
The main issue is:
When the user tries to scroll vertically within the book area (on HorizontalPage), the VerticalPage does not move.
Solution I tried (but didn’t work):
When the user makes a vertical scroll gesture on the HorizontalPage, I tried disabling the Horizontal ScrollRect component within it and then accessing the Vertical ScrollRect of the BooksReader to allow vertical movement on the VerticalPage panel.
How can I prevent conflicts between nested vertical and horizontal scroll rects in this case?
Project Images;
Here is the project package;
BooksReader.unitypackage (48.3 KB)