Настраиваемая полоса прокрутки CSS для Интернета с использованием плоского списка react-native-web

#css #react-native-flatlist #react-native-web

Вопрос:

Я использую react-native-web для создания веб-приложения для Android/iOS. У меня есть плоский список, полный элементов, но он отображает полосу прокрутки браузера по умолчанию. Есть ли в любом случае, что я могу применить свойства css-webkit к плоскому списку только в Интернете, чтобы оформить панель прокрутки?

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

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

Ответ №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; } 
 lt;div style="margin-top: 1000px;"gt;lt;/divgt;