CSS - “溢出”的过渡？ [英] CSS - Transition for 'Overflow'?

问题描述

我用 overflow-y 获得了页脚以及一些可滚动内容。
页面上的其他所有内容都通过CSS过渡非常流畅地进行动画制作，但是当滚动条出现在页脚的空白处时，它在没有任何转换时看起来非常愚蠢。看看 此处 。
有没有办法让它平滑过渡？

CSS：

  footer 
 {
 background-color：＃333333; 
位置：固定; 
身高：4％; 
 bottom：0px; 
 margin-bottom：0px; 
宽度：100％; 
 text-align：right; 
过渡：全部缓解1.1s; 
颜色：白色; 
 background-image：url（'world1.gif'）; 
背景重复：不重复; 
背景位置：右下角; 
 background-size：包含; 
 overflow-y：hidden; 
} 
 
 footer：hover {
 height：400px; 
不透明度：0.95; 
 overflow-y：auto; 
 
  

解决方案

并放置一个div来隐藏滚动条。它的hacky，但滚动条不是真的应该是动画。

http://jsfiddle.net/ttgB8/

 页脚，
 .cover-scroll {
位置：固定; 
 bottom：0px; 
过渡：全部缓解1.1s; 
身高：4％; 
} 
 
页脚{
宽度：99％; 
 overflow-y：auto; 
} 
 
 footer：hover {
 opacity：0.95; 
 height：400px; 
} 
 
 .cover-scroll {
 background：#fff; 
 width：40px; 
 right：0px; 
大纲：1px纯红色; 
 bottom：0; 
 z-index：20; 
} 
 
 .cover-scroll：hover，
 footer：hover .cover-scroll {
 opacity：0; 
可见性：隐藏; 
 height：400px; 
} 
  

作为替代，您可以搜索自定义滚动条插件，例如iScroll和就像。

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

解决方案

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

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

这篇关于CSS - “溢出”的过渡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！