我有一个在悬停时显示的滚动条,我想实现像 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;
}
最佳答案
你不能完全按照你的要求去做,因为那个属性不能被转换,但只是为了好玩……这是另一种方法。它从侧面“动画化”滚动条,但缺点是会稍微打乱内容。
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>
关于html - Css 过渡延迟不适用于滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40347496/