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>