css - 使用 react-native-web FlatList 的自定义 CSS 滚动条

Question

我正在使用 react-native-web 构建 android/iOS/web 应用程序。我有一个充满元素的 FlatList，但它显示默认浏览器的滚动条。无论如何，我可以仅在网络上将 -webkit css 属性应用于 FlatList 以设置滚动条样式吗？

自定义滚动条.css

/* width */
.customScrollbar::-webkit-scrollbar {
  width: 4px;
}

/* Track */
.customScrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.customScrollbar::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
.customScrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

相关.tsx

<FlatList contentContainerStyle={styles.flatlist_styler} data={messages} keyExtractor={message => message.id} renderItem={({item}) => <Message messageObject={item} />} />

Answer 1

试试看:

/* width */
::-webkit-scrollbar {
    width: 4px;
}
  
/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

<div style="margin-top: 1000px;"></div>