3

I'm using react-native-web to build an android/iOS/web application. I have a FlatList full of elements, but it displays the default browser's scrollbar. Is there anyway I can apply -webkit css properties to the FlatList only on web to style the srollbar?

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

relevant .tsx

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

1 Answers1

-2

Try that:

/* 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>
Nik8888
  • 1