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

Question

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

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} />} />

标签： cssreact-native-flatlistreact-native-web

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>