如何在React中添加透明滚动条?

问题描述 投票:0回答:2

我一直在设置overflow-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进行开发。

javascript css reactjs
2个回答
0
投票

检查代码片段和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>

0
投票

默认:

no scroll

之后

hover beautifull scorll

#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>
© www.soinside.com 2019 - 2024. All rights reserved.