Question

我的footer有一些带有overflow-y的可滚动内容。页面上的其他所有内容都可以通过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来隐藏滚动条。它的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等自定义滚动条插件。

CSS - '溢出'的过渡？

1 个答案: