Как добавить прозрачную полосу прокрутки в React?

Question

Я добавил прокрутку overflow-Y: для материализации коллекций, так как я установил фиксированную высоту оболочки. Тем не менее, я искал, чтобы сделать полосы прокрутки прозрачными. Я нашел вопросы и ответы о добавлении WebKit. Но он выдает ошибки, и я знаю, что они не могут быть добавлены в React. Я пытался с внешним CSS с указанным c ID. Но это все еще не работает. Содержание действительно ужасно для моих глаз с полосой прокрутки.

#no-scroll1::-webkit-scrollbar {
   width: 0px;  
   background: transparent; 
}

Ниже приведен ответ.

<div
          id="no-scroll1"
          className="col s2 z-depth-2 grey lighten-5 no-scroll"
          style={{ height: "55em", overflowY: "scroll"}}
    >

Примечание. Я использую Chrome и работаю с React, Babel CDN.

Answer 1

Проверка реализации фрагмента и реакции стекаблица, Демонстрация Stackblitz .

#no-scroll1::-webkit-scrollbar {
 width: 0px;
 background: transparent;
}
#no-scroll1{
border:1px solid;
}

<div id="no-scroll1" class="col s2 z-depth-2 grey lighten-5 no-scroll" style="height: 10em; width:200px; overflow-y: scroll">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>

Answer 2

По умолчанию:

После:

#no-scroll1 {
            overflow: hidden;
        }

        #no-scroll1:hover {
            overflow-y: auto;
        }

        #no-scroll1::-webkit-scrollbar {
            width: 8px;
            height: 16px;
        }

        #no-scroll1::-webkit-scrollbar-button {
            width: 0;
            height: 0;
            display: none;
        }

        #no-scroll1::-webkit-scrollbar-corner {
            background-color: transparent;
        }

        #no-scroll1::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.2);
            -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
        }

<div id="no-scroll1" className="col s2 z-depth-2 grey lighten-5 no-scroll"
        style="border:solid 1px #000;height:5em;width:150px; ">

        test<br />test<br />test<br />test<br />test<br />test<br />testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
        test<br />test<br />test<br />test<br />test<br />

    </div>

Answer 3

Вы также можете попробовать это:

#no-scroll1::-webkit-scrollbar {
  width: auto;
}
#no-scroll1::-webkit-scrollbar-track, #no-scroll1::-webkit-scrollbar-thumb {
  background: transparent;
}

Просто сделать фон прозрачным для трека полосы прокрутки и большого пальца. Не нужно использовать width: 0