2

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

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;
}
4

1 回答 1

1

你可以做这样的事情并放置一个 div 来隐藏滚动条。它的hacky，但滚动条不应该是动画的。

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 等。

于 2013-11-11T19:18:54.567 回答