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);
});

在滚动div中自定义光标图像

1 个答案: