How to Override "::-Webkit-Scrollbar" CSS Rule and Make Scrollbar Visible Again

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

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>

Make scrollbars only visible when a Div is hovered over?

div {  height: 100px;  width: 50%;  margin: 0 auto;  overflow: hidden;}
div:hover {  overflow-y: scroll;}

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

Apply webkit scrollbar style to specified element

Your idea was correct. However, the notation div ::-webkit-scrollbar with a space after div is actually the same as div *::-webkit-scrollbar; this selector means "scrollbar of any element inside <div>". Use div::-webkit-scrollbar.

See demo at http://jsfiddle.net/4xMUB/2/

CSS3 scrollbar styling on a div

Setting overflow: hidden hides the scrollbar. Set overflow: scroll to make sure the scrollbar appears all the time.

To use the ::webkit-scrollbar property, simply target .scroll before calling it.

.scroll {
   width: 200px;
   height: 400px;
    background: red;
   overflow: scroll;
}
.scroll::-webkit-scrollbar {
    width: 12px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
​

See this live example

How can I style horizontal scrollbar by CSS?

::-webkit-scrollbar {
  height: 4px;              /* height of horizontal scrollbar ← You're missing this */
  width: 4px;               /* width of vertical scrollbar */
  border: 1px solid #d5d5d5;
}

since logically one cannot force a vertical scrollbar to be a certain height (since dictated by the positioned parent) - therefore such height property is to target the horizontal's scrollbar height - and vice-versa (width for the width of the vertical scrollbar.).

---

Related Topics