如何根据网站中的位置更改光标样式

Question

我有一个网站，我的网站可以根据鼠标位置滚动。我的意思是，当光标靠近底部时，网站会向下滚动，当靠近顶部时，它会向上滚动。但我想在光标靠近顶部或底部时显示向下和向上箭头。

Answer 1

您可以在 document.body

上使用 mousemove 来完成

document.body.addEventListener("mousemove", function(e) {
  if (e.screenY < topThreshhold) {
    //change the cursor to up arrow
    document.body.style.cursor = "n-resize";
  } else if (e.screenY > bottomThreshhold) {
    //change the cursor to down arrow
  }
});

Answer 2

如果您想根据用户向下滚动的距离来执行此操作，您可以使用此代码

const change_cursor_height = 500;

window.onscroll = function() {
    if (document.body.scrollTop >= change_cursor_height) {
        document.body.style.cursor = "n-resize";
    } else {
        document.body.style.cursor = "auto";
    }
}

如何根据网站中的位置更改光标样式

how to change cursor style by positon in website

javascript

html

jquery

css

cursor