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

你无法完全按照自己的要求行事，因为该属性无法转换，只是为了好玩......这是另一种方法。它＆＃34;动画＆＃34;滚动条从侧面开始，但有一点内容改变内容的缺点。

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