CSS-过渡为' Overflow&#39 ;? [英] CSS - Transition for 'Overflow'?

问题描述

我得到了一个 footer ，其中包含一些可滚动的内容，其中包含 overflow-y .页面上的所有其他内容均通过CSS过渡非常流畅地进行了动画处理，但由于滚动条仅在悬停时才显示在页脚中，所以在没有任何过渡时看起来确实很愚蠢.在 此处 中查看.有没有办法使其平滑过渡?

I got a footer with some scrollable content with overflow-y. Everything else on the page is very smoothly animated with CSS transitions, but as the scrollbar appears in the footer just when hovering, it looks really stupid when it doesn't have any transition. Take a look here. Is there a way to make a smooth transition for it?

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

推荐答案

您可以执行以下操作并放置div以隐藏滚动条.它很hacky，但是滚动条实际上​​不应该动画.

You can do something like this and place a div to hide the scrollbar. Its hacky, but scrollbars are not really supposed to be animated.

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等).

As an alternative you could search for custom-scrollbar-plugins like iScroll and the like.

这篇关于CSS-过渡为' Overflow&#39 ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！