0

カーソルが上または下にあるとき（上または下にスクロール）にコンテンツをスクロールするdivがあります。2つのカスタマイズされたカーソル画像があります。1つはdivコンテンツが上にスクロールしているときに表示され、もう1つはdivコンテンツが下にスクロールしているときに表示されます。以下のスクリプトはstackoverflowメンバーによって作成され、待機、ポインターなどの標準のカーソルスタイルを使用している場合にのみ機能します。画像を使用したいのですが、正しく機能しません。また、以下のスクリプトではタイマーは必要ありません。

 <script type='text/javascript' >
 var top=0, timer;

 $('#repertoirescroll').on('scroll', function() {
 clearTimeout(timer);
 var scrollTop = $(this).scrollTop(),
    cursor = scrollTop > top ? 'pointer' : 'wait';
 $('body').css('cursor', cursor);
 top = scrollTop;
 timer = setTimeout(function() {
    $('body').css('cursor', 'default');
 }, 500);
 });​

 </script>

私が使用している画像名は

 url(../images/arrowup.png)
 url(../images/arrowdown.png)

* HTML / CSS **

 .cursorup {
  cursor: url(../images/arrowup.png), auto;
  position:relative;

 }

 .cursordown {
  cursor: url(../images/arrowdown.png), auto;
  position:relative;

 }

コンテンツのスクロール

よろしくお願いします。

4

1 に答える 1

1

カスタム カーソルを使用するには、CSS スタイルを使用します。

.curarrowup {
    cursor: url(../images/arrowup.png), auto;
}

次に適用するには、jQuery を使用してスタイルを適用します。

$(myElement).addClass("curarrowup");

通常のカーソルに戻したい場合:

$(myElement).removeClass("curarrowup");

あなたの例のように $('body') (myElement === 'body') を使用しても問題ありません。

1 つの注意点: Firefox では、実際にマウスを動かすまで新しいカーソルが表示されないことがよくあります。これは既知のバグであり、回避策が見つかりません。

編集:コードの変更:

var top=0, timer;

$('#repertoirescroll').on('scroll', function() {
    var scrollTop, cursor;

    clearTimeout(timer);
    scrollTop = $(this).scrollTop();
    cursor = scrollTop > top ? 'curarrowup' : 'curarrowdown';
    $('body').addClass(cursor);
    top = scrollTop;
    timer = setTimeout(function() {
        $('body').removeclass(cursor);
    }, 500);
});​
于 2012-09-13T15:56:48.067 に答える