如何在 React 中添加透明滾動條？

Question

自從我設置了固定的包裝高度以來，我一直在添加溢出-Y：滾動以實現集合。 但是，我一直在尋找使滾動條透明。 我找到了有關添加 WebKit 的問題和答案。 但它會拋出錯誤，我知道這些在 React 中是不可添加的。 我曾嘗試使用具有特定 ID 的外部 CSS。 但它仍然不起作用。 滾動條的內容在我看來真的很難看。

#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

你也可以試試這個：

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

只是使滾動條軌道和拇指的背景透明。 不需要使用width: 0

Answer 2

檢查代碼段和 stackblitz react 實現， Stackblitz demo 。

 #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 3

默認：

后：

#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>