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

Question

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

customScrollbar.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>