如何让React-Infinite-Scroll-Component滚动条匹配Mantine ScrollArea样式？

方法一：用Mantine ScrollArea直接包裹（推荐） #

可以用ScrollArea组件包裹InfiniteScroll，但需要调整配置避免滚动事件冲突：

• 给ScrollArea设置固定高度（或最大高度），确保它成为滚动容器
• 将InfiniteScroll的scrollableTarget指定为ScrollArea的内部滚动容器
• 关闭InfiniteScroll的useWindow属性（设为false），让它监听指定容器的滚动事件

示例代码：

import { ScrollArea } from '@mantine/core';
import InfiniteScroll from 'react-infinite-scroll-component';

function InfiniteList({ items, loadMore, hasMore }) {
  return (
    <ScrollArea style={{ height: '80vh' }}>
      <InfiniteScroll
        dataLength={items.length}
        next={loadMore}
        hasMore={hasMore}
        loader={<h4>加载中...</h4>}
        scrollableTarget="mantine-scroll-area" // 对应ScrollArea默认容器ID
        useWindow={false}
      >
        {items.map((item, index) => (
          <div key={index} style={{ padding: '1rem', borderBottom: '1px solid #eee' }}>
            {item.content}
          </div>
        ))}
      </InfiniteScroll>
    </ScrollArea>
  );
}

注意：如果自定义了ScrollArea的id，需将scrollableTarget的值改为对应ID。

方法二：自定义滚动条样式（不使用ScrollArea包裹） #

如果不想依赖ScrollArea组件，可以直接复用Mantine的滚动条设计风格，通过自定义CSS实现：

1. 给InfiniteScroll的外层容器添加类名，比如infinite-scroll-container
2. 编写CSS模拟Mantine ScrollArea的滚动条样式：

.infinite-scroll-container {
  height: 80vh;
  overflow-y: auto;
}

/* WebKit内核浏览器滚动条样式 */
.infinite-scroll-container::-webkit-scrollbar {
  width: 8px;
}

.infinite-scroll-container::-webkit-scrollbar-track {
  background: var(--mantine-color-gray-1);
  border-radius: var(--mantine-radius-sm);
}

.infinite-scroll-container::-webkit-scrollbar-thumb {
  background: var(--mantine-color-gray-4);
  border-radius: var(--mantine-radius-sm);
  transition: background 0.2s ease;
}

.infinite-scroll-container::-webkit-scrollbar-thumb:hover {
  background: var(--mantine-color-gray-5);
}

/* Firefox兼容样式 */
.infinite-scroll-container {
  scrollbar-width: thin;
  scrollbar-color: var(--mantine-color-gray-4) var(--mantine-color-gray-1);
}

3. 在组件中应用类名：

<div className="infinite-scroll-container">
  <InfiniteScroll
    dataLength={items.length}
    next={loadMore}
    hasMore={hasMore}
    loader={<h4>加载中...</h4>}
    useWindow={false}
  >
    {/* 列表项内容 */}
  </InfiniteScroll>
</div>

关键注意点 #

• 两种方法都需要将InfiniteScroll的useWindow设为false，避免监听整个窗口的滚动事件
• 用ScrollArea包裹时，要确保scrollableTarget的ID与ScrollArea容器ID匹配
• 自定义样式时，使用Mantine的CSS变量能保证样式与主题统一

内容的提问来源于stack exchange，提问作者saddiqs1