feat(useInfiniteScroll): using useInfiniteScroll with isInverse prop

[rom-orlovich]

[中文版模板 / Chinese template]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

First and foremost, I want to express my deep appreciation for the ahooks project. It has been an invaluable addition to the React ecosystem, providing a collection of useful hooks that have played a significant role in helping the React community thrive.

💡 Background and solution

Problem and Scenario:

I've submitted this pull request to tackle a common challenge when implementing chat-like interfaces, where users often need to scroll upwards to load more messages or content. The problem arises because there is currently no built-in functionality to change the scroll direction and trigger the loading function.

Currently, without any props to modify the scroll direction, users must rotate the list and apply CSS tricks to simulate an upward scroll. This workaround is not intuitive and can lead to suboptimal user experiences.

Solution:

To improve this situation, I would suggest adding the capability to trigger the loading function when scrolling up, which aligns with common chat application behavior. I've implemented a straightforward logic to achieve this:

When a user scrolls up, the scrollTop value becomes negative relative to the container we monitor for scroll events.
If the sum of the negative scrollTop and the scroll height is less than or equal to the client height, and the chosen threshold is met, we can conclude that the user has scrolled to the top of the page.
At this point, we can trigger the load function, ensuring a smooth and familiar experience for users.

Final API Implementation:

As part of this pull request, I've introduced a new prop called isInverse to the useInfiniteScroll hook. When set to true, this prop specifies that the desired scroll direction should be upward. This allows developers to easily configure the scroll behavior to align with common chat application requirements, where users scroll up to load more messages or content.

import { useInfiniteScroll } from 'ahooks';
const loadMoreData = () => {
  // Your load more data logic here
};

const { data, loading, loadMore } = useInfiniteScroll({
  isInverse: true, // Specify that the scroll direction should be upward
  loadMore: loadMoreData
});

📝 Changelog

Language	Changelog
🇺🇸 English
🇨🇳 Chinese

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[CLAassistant]

All committers have signed the CLA.

[liuyib]

@hchlq 程哥有空看下这个哈~