2

スクロールバーを徐々にフェードインしようとしています。現在、スクロールバーを表示する方法は、オーバーフローを自動に変更するクラスをボディに追加することですが、非常にぎくしゃく/突然に見えます。

以下は、スクロールバーを表示するクラスを突然追加する JS コードです。

var bodywidth = $('body').width();
var scrollwidth = 10;
$('body').mousemove(function(e){
    var x = e.pageX - this.offsetLeft;

    if(x>bodywidth-scrollwidth)
        $('body').addClass("auto");
    else
        $('body').removeClass("auto");
});

これらのクラスに対応する CSS は次のとおりです。

body
{
    margin:0;
    overflow:hidden;
}
.auto
{
    overflow:auto;
}

この移行を急ではないようにするにはどうすればよいですか? クラスを追加してクラスを削除するより良い方法はありますか。

4

1 に答える 1

2

スクロールバーは -webkit-scrollbar でカスタマイズできますが、これはアニメーション化できません (または、少なくとも私は成功しませんでした)。また、他のブラウザーでのサポートは貧弱です。

別の方法は、スクロールバーのすぐ上に div を設定し、ベース div と同じ色にし、徐々に透明にしてスクロールバーを表示することです。

htmlは次のとおりです。

<div class="container">
<div class="base">
<p>aaa   aaaaa aaaaa aaaaaaaa aaaa aaa aaa aaaa bbbbbb bbbbbb cccc cccc cccc
</p>
</div>
<div class="hide">
</div>
</div>

CSSは次のとおりです。

.base {
    width: 100px;
    background-color: white;
    top: 0px;
    position: absolute;
    height: 130px;
    overflow: hidden;
    padding-right: 20px;
}
.base.clipped {
    overflow: auto;
}


.hide {
    position: absolute;
    width: 19px;
    height: 100%;
    right: 0px;
    background-color: white;
    top: 0px;
    -webkit-transition: all 2s;
    z-index: 10;
}

.hide.clipped {
    background-color: transparent;
}

私は常に要素のクラスを保持していますが、両方にクリップされた 2 番目のクラスを追加しています。スクロールバーを持つ要素にパディングを設定して、レイアウトを再配置せずにスペースを確保します。hide 要素は css で遷移できますが、オーバーフローは遷移できません。

ジャバスクリプトは

$("*").click(function(){
    var obj = $(".base");
    var hid = $(".hide");
    if (obj.hasClass("clipped")) {
        hid.removeClass("clipped");
        setTimeout(function() {
            obj.removeClass("clipped");
        }, 2000);
    } else {
        hid.addClass("clipped");
        obj.addClass('clipped');
    }
 });

デモ

于 2013-04-11T16:56:35.693 に答える