I have used the below code to hide all scrollbar in react project and I want to keep it that way but for a specific div I want a scroll bar to be displayed overriding the below code how can I do that

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

the div that I don't want the above code to have

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

I want something like this

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

CodePudding user response：

The style which you wrote seems correct. Try marking the style as !important or add more specificity.

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

Also make sure that tabview is the container div.

CodePudding user response：

Use the CSS not keyword.

reference

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>