override::-webkit-scrollbar 用于我的反应项目中的特定 div

Question

我已经使用下面的代码来隐藏 React 项目中的所有滚动条，我想保持这种方式，但是对于特定的 div，我希望显示一个滚动条，覆盖下面的代码我该怎么做

::-webkit-scrollbar {
  display: none;
}

我不希望上面的代码拥有的 div

<div className="tabview"></div>

我想要这样的东西

.tabview::-Webkit-scrollbar {  //I want something like this to override the code that has been given to the entire project
  display: block;
}

Answer 1

你写的风格似乎是正确的。 尝试将样式标记为!important或添加更多特异性。

.tabview::-webkit-scrollbar { 
      display: block !important;
}
 

还要确保tabview是容器 div。

Answer 2

使用 CSS not关键字。

参考

 .box, .tabview { width:200px; height:200px; overflow:auto; border:1px solid red; } div:not(.tabview)::-webkit-scrollbar { display: none; }

 <div class="tabview"> <h1>Test</h1> <h1>Test</h1> <h1>Test</h1> <h1>Test</h1> </div> <div class="box"> <h1>Test</h1> <h1>Test</h1> <h1>Test</h1> <h1>Test</h1> </div> <div class="box"> <h1>Test</h1> <h1>Test</h1> <h1>Test</h1> <h1>Test</h1> </div>

Answer 3

首先删除overflow:scroll; 从表内联样式。 因为您已经为所有人隐藏了滚动条，并且您使用旧的 css 在 class .tabview上启用了滚动。 并且您在 Table 中应用滚动，这会导致问题。

方法- 1

因此，请在CSS下面使用，不要在其中使用!important 。

.tabview{
    max-height: 300px;
    overflow: auto;
}

.tabview::-webkit-scrollbar { 
    display: block;
}

根据您的需要更改max-height 。

方法二

或者只是在 css 下面使用

.tabview table::-webkit-scrollbar { 
    display: block;
}