CSS过渡延迟不适用于滚动条

Question

我有一个在悬停时显示的滚动条，我想要实现像在悬停时显示的Facebook滚动条一样，并且我希望它不会立即缓慢出现，但是CSS转换延迟不起作用。

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

您无法完全按照自己的要求进行操作，因为该属性无法转换，只是为了好玩而已...这是另一种方法。 它从侧面对滚动条进行“动画处理”，但是具有使内容混乱的缺点。

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>