0

オーバーフローしている HTML 要素のホバー時にスクロールバーをフェードインする必要があります。overflow: hiddenイベントとイベントoverflow: autoを切り替えてスクロールバーを簡単に表示および非表示にできますがmouseenter、mouseleave非常に突然であり、フェードインするエレガントな方法は考えられません。

これまでのところ、私は持っています:

$(".scrollable").mouseenter(function () {
    $(this).css("overflow", "auto");
});

$(".scrollable").mouseleave(function () {
    $(this).css("overflow", "hidden");
});

これを行うための良い方法があれば、何かアイデアはありますか?

PS。ネイティブ スクロールバーにスタイルを追加できる Webkit ブラウザーでのみ興味があります。

4

4 に答える 4

1

ゲームに少し遅れていることは知っていますが、このようなものを探していて、次のことを思いつきましたが、非アクティブなときに非表示になるフェードを正確に取得することはできません. トランジションはまだこれで機能していないようです...

ここにフィドルがあります： http://jsfiddle.net/ethanpil/j7180ryv/

ホバリングを切り替える Javascript のビット

$(window).scroll(function() {
    $('body').addClass('scrolling');
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        $('body').removeClass('scrolling');
    }, 250));
});

CSS:

::-webkit-scrollbar {
    width: 6px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(242, 242, 242, 0);
}
::-webkit-scrollbar-thumb {
    background: rgba(221, 221, 221, 0);
    border-radius: 3px;
}
body:hover::-webkit-scrollbar-thumb {
    background: rgba(242, 242, 242, 1);
}
body.scrolling::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:horizontal:hover, 
::-webkit-scrollbar-thumb:vertical:hover {
    background: rgba(153, 153, 153, 1);
}
::-webkit-scrollbar-thumb:horizontal:active,
::-webkit-scrollbar-thumb:vertical:active {   
    background: rgba(153, 153, 153, 1);
}
于 2015-02-24T09:26:07.497 に答える
1

コメントで述べたように、CSS3 ソリューションを試しましたが、うまくいきませんでした。何年もかかりましたが、これを機能させるためのある種の「チート」を見つけました。div と同じ背景色で div を作成します。スクロールバーと同じ幅にし (最初に幅を見つけます)、読み込み時にフェードアウトさせます。このようにして、スクロールバーがゆっくりと表示されます。ここにフィドルがあります：http://jsfiddle.net/BramVanroy/evJpR/

// We got the scrollbar width in w3

// create a div with scollbar width and append it to body
// we can't append it to the div because for some sort of z-index issues this does not work. Scrollbar will overlap the div
// make sure to give the div the same background-color as its parent
// get offset and width and height of div width scrollbar
var scrolled = $("body > div"),
    offL = scrolled.offset().left,
    offT = scrolled.offset().top + 1, // +1 for strange webkit pixel bug?
    thisW = scrolled.outerWidth(),
    h = scrolled.innerHeight(), 
    pos = offL + thisW - w3 - 1, // - 1 for strange webkit pixel bug?
    bgCl = "#fff";

$("<div />", {
    style: "width:" + w3 + "px; height:" + h + "px; background-color:" + bgCl + "; position: absolute; top:" + offT + "px; left: " + pos + "px;"
}).appendTo("body").fadeOut(3000);

楽しい事実: FF、Chrome、IE 7-10 でも動作します!

于 2013-06-04T17:22:45.797 に答える