在滾動div中自定義光標圖像

Question

當光標位於頂部或底部（向上或向下滾動）時，我有一個可以滾動內容的div。我有兩個自定義的光標圖像 - 一個應該顯示div內容滾動時的情況，另一個應該顯示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; 

} 

滾動內容

感謝您提前提供任何幫助。

Answer 1

要使用自定義光標，您可以使用CSS樣式：

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

然後提出申請，使用jQuery應用的樣式：

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

當你想回到正常的光標：

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

在你的例子中使用$（'body'）（myElement ==='body'）就好。

一個警告：在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); 
});​