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 を配置してスクロールバーを非表示にすることができます。ハックですが、スクロールバーは実際にアニメーション化することは想定されていません。

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 などの custom-scrollbar-plugins を検索することもできます。

于 2013-11-11T19:18:54.567 に答える