html - CSS - 'Overflow' 的过渡？

Question

我用 overflow-y 得到了一个带有一些可滚动内容的 footer。 页面上的其他所有内容都非常流畅地使用 CSS 过渡动画，但是当悬停时滚动条出现在页脚中，当它没有任何过渡时看起来真的很愚蠢。看看 here 。 有没有办法让它平滑过渡？

CSS:

footer
{
    background-color:#333333;
    position:fixed;
    height:4%;
    bottom: 0px;
    margin-bottom: 0px;
    width:100%;
    text-align: right;
    transition: all ease 1.1s;
    color: white;
    background-image:url('world1.gif');
    background-repeat:no-repeat;
    background-position: right bottom ;
    background-size: contain;
    overflow-y: hidden;
}

footer:hover {
height: 400px;
opacity: 0.95;
overflow-y: auto;
}

Answer 1

您可以这样做并放置一个 div 来隐藏滚动条。它很老套，但滚动条实际上​​不应该是动画的。

http://jsfiddle.net/ttgB8/

footer, 
.cover-scroll{
    position:fixed;
    bottom: 0px;
    transition: all ease 1.1s;
    height:4%;
}

footer    {
    width:99%;
    overflow-y: auto;
}

footer:hover {
  opacity: 0.95;
  height: 400px;
}

.cover-scroll{ 
    background: #fff;
    width: 40px;
    right: 0px;
    outline: 1px solid red;
    bottom: 0;
    z-index: 20;
}

.cover-scroll:hover, 
footer:hover .cover-scroll{
    opacity: 0;
    visibility: hidden;
    height: 400px;
 }

作为替代方案，您可以搜索自定义滚动条插件，例如 iScroll 等。