質問の数のための弾丸を含む、

Question

私は現在、下部のnavigationbarとクイズアプリケーションを構築しています（jQueryの使用）、スクロール時にのみスクロールバーを表示する方法：私はスクロールバーを持って

Screenshot of scrollbar

ナビゲーションバーの役割を果たす、私のページの一番下に横（水平）に表示されます。あなたはモバイルアプリケーションで多くを見ているようです。私はスクロールバーを表示したり、スクロールバーを表示したりする必要はありません。単にクリックしてサイド（またはタブレットのタップとドラッグ）にドラッグするだけです。これは現在うまくいきます。

問題私はfunctionallityは私がスクロールする場合にのみポップアップする小さなダークブルーのスクロールバーであるとして追加したいと思い何

。スクロールバーの代わりにdivを使うと、CSSで調整するのが最も簡単だと思いました。今、私はdivと一緒にスクロールし、質問の長さと現在の位置に自動調整されている。

スクロールが行われるたびにスクロールバーを表示する方法を知っていますか？私はむしろそれをホバー上に置くのではなく、ムーブメント上に置くだけです。

私が出回っ以下を試してみました：

$('#wrapper').scroll(function() { 
    $('#navScrollbar').toggleClass("hidden"); 
}); 

明らかに隠されたクラスが含まれています "可視性：隠された;" を。これは、すべてのスクロールの動きがクラスを切り替えるためにはうまくいかないでしょう。

Answer 1

質問はずっと前に頼まれました。質問は長い時間前に頼まれたので、私は答えとして選ばれたソリューションをあげる：

スクロールイベントが起こるたびに、このコードは何

var scrollbarTimeout; 

$('#wrapper').scroll(function() { 
    $('#navScrollbar').show(); 
    clearTimeout(scrollbarTimeout); 
    scrollbarTimeout = setTimeout(function() 
    { 
     // Your function here 
     $('#navScrollbar').hide(); 
    }, 500); 
}); 

、：呼び出された関数が作成されます（またはクリアして作成されます）タイムアウトを500ミリ秒後にスクロールバーを非表示にします。

Answer 2

これがうまくいけば行いますがある毎秒を実行または2

var isUserScrolling = false; 
var navScrollbar = $('#navScrollbar'); 

function ToggleScrollbarVisiblity() 
{ 
    if(isUserScrolling == false) 
    navScrollbar.stop().fadeOut(); 

    isUserScrolling = false; 
} 

setInterval(ToggleScrollbarVisiblity, 1500); 

$('#wrapper').scroll(function() { 
    if(isUserScrolling == false) 
    navScrollbar.stop().fadeIn(); 

    isUserScrolling = true; 
}); 

ティッカー機能を作成します。

• ユーザーがスクロールバーでフェードをスクロールを開始し、trueにブール値を設定します

• x秒ごとにスクロールが偽に設定されます。

• それはまだfalseの場合x秒は約戻ってくる（ユーザーがx秒にスクロールしていない）間違った瞬間にフェードアウトスクロールバーで問題が発生した場合、その後

---

をフェードアウトそれはタイミングの問題です。そして、タイミングを調整し、試してみてください。私はまだ多くの経験を持っていなかったとき

var scrollThread = null; 
var isUserScrolling = false; 
var navScrollbar = $('#navScrollbar'); 

function ToggleScrollbarVisiblity() 
{ 
    if(isUserScrolling == false) { 
    navScrollbar.stop().fadeOut(); 
    clearInterval(scrollThread); 
    } 

    isUserScrolling = false; 
} 

$('#wrapper').scroll(function() { 
    if(isUserScrolling == false) { 
    navScrollbar.stop().fadeIn(); 
    scrollThread = setInterval(ToggleScrollbarVisiblity, 1500); 
    } 

    isUserScrolling = true; 
});