ler ler - 1 month ago 6
HTML Question

Css transition delay not working with scrollbar

I have a scroll bar who display on hover, i want to achieve like facebook scroll bar who showed up just on hover, and i want it to show up slowly not at once but the css transition delay is not working.

.scrolldiv {
height: 100%;
margin-right: -10px;
overflow: hidden;
transition-delay: 1s; /* delays for 1 second */
-webkit-transition-delay: 1s; /* for Safari & Chrome */
}
.scrolldiv:hover {
overflow-y: auto;
}

Answer

You can't do exactly what you're asking because that attribute can't be transitioned, but just for fun... here's another approach. It "animates" the scrollbar in from the side, but has the downside of shuffling the content a little bit.

https://jsfiddle.net/fr6b4b2d/

.wrapper {
  height:200px;
  width:200px;
  overflow:hidden;
}

.scrolled-stuff {
  width:220px;
  height:200px;
  overflow:auto;
  transition:.2s;
}
.scrolled-stuff:hover {
  width:200px;
}

html

<div class="wrapper">
<div class="scrolled-stuff">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas eligendi aliquid numquam sa...
</div>
</div>
Comments