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