I am using the ReactBits Infinite Scroll component in my React project, and I want to modify its behaviour so that instead of an infinite scroll effect, it behaves as follows:

1. When the user scrolls down the page, the page should scroll until it reaches the Infinite Scroll component.
2. The Infinite Scroll component should then lock the page scrolling and allow only its internal list to scroll until it reaches the end.
3. Once the list reaches the end, the page scrolling should resume.
4. The same behaviour should happen when scrolling up—lock the page, scroll the list up, and then resume scrolling the page.

How can I achieve this effect cleanly in React? Any guidance or best practices would be greatly appreciated.