1

私は現在、下部にナビゲーションバーがあり、質問の数の箇条書きを含むクイズアプリケーションを作成しています。

スクロールバーのスクリーンショット

ページの下部にナビゲーションバーとして機能するスクロールバー（水平）があります。モバイルアプリケーションでよく見られるように。スクロールバーが表示されていないか、表示されたくないのですが、スクロールするには、クリックして横にドラッグするだけです（またはタブレットでタップしてドラッグします）。これは現在正常に機能しています。

問題

機能として追加したいのは、スクロールした場合にのみポップアップする小さな紺色のスクロールバーです。スクロールバーの代わりにdivを使用すると、cssで調整するのが最も簡単だと思いました。これで、divが表示され、バーに沿ってスクロールし、質問の長さと現在の位置に自動調整されます。

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

私はすでに次のことを試しました：

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

hiddenクラスには、明らかに「visibility：hidden;」が含まれています。これは、すべてのスクロール動作でクラスが切り替わる場合には機能しません。

4

2 に答える 2

1

私がまだあまり経験がなかったとき、質問はずっと前に尋ねられました。質問はずっと前に尋ねられたので、私は答えとして選ばれた解決策を与えます：

var scrollbarTimeout;

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

スクロールイベントが発生するたびにこのコードが行うこと：呼び出された関数は、500ミリ秒後にスクロールバーを非表示にするタイムアウトを作成（またはクリアして作成）します。

于 2014-02-03T13:57:41.947 に答える
0

1〜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に設定します

  • それでも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;
});
于 2012-04-26T13:15:09.183 に答える