CODEWITHSUNDEEP
htmlcssreactjs
meenu cd
meenu cd

Reputation: 37

override ::-webkit-scrollbar for a specific div in my react project

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;
}

enter image description here

enter image description here

enter image description here

Upvotes: 1

Views: 2999

Answers (3)

NeERAJ TK
NeERAJ TK

Reputation: 2695

You can exclude tabview styling by writing a not pseudoclass, as:

::-webkit-scrollbar:not(.tabview){
  display: none;
}

Alternatively, you can mark the style as !important or add more specificity.

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

Also make sure that tabview is the container div.

Upvotes: 0

Jignesh Panchal
Jignesh Panchal

Reputation: 1376

Firstly Remove overflow:scroll; from table inline style. Because you already hide scrollbar for all and you enable scroll on class .tabview using your old css. And you apply scroll in Table which is causes problem.

enter image description here

Method- 1

So, use below CSS and not use !important in it.

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

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

Change max-height according your needs.

Method-2

Or just use below css

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

Upvotes: 0

MomasVII
MomasVII

Reputation: 5061

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>

Upvotes: 1

Related Questions