Javascript 如何使自定义跟随光标跟随Y轴滚动

我在squarespace网站上使用了一些HTML和CSS来创建一个自定义的跟随光标。我只想有一个浮动的圆圈，没有实际的光标显示。我已经让它大部分工作，但当我的网站滚动时，跟随光标不会随着页面滚动而移动，只是停留在顶部

这只会导致跟随光标随着鼠标的移动而完全停止移动，在页面中心变得静止

将HTML和CSS注入squarespace站点以创建自定义跟随光标：

正文{
背景：#161616；
}
.包裹{
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
溢出：隐藏；
}
#球{
宽度：60px；
高度：60px；
背景：无；
边框：1px纯灰；
边界半径：50%；
位置：绝对位置；
左：50%；
最高：50%；
裕度：-10px0-10px；
指针事件：无；
}

var$=document.querySelector.bind（文档）；
var$on=document.addEventListener.bind（文档）；
var xmouse，ymouse；
$on（'mousemove'，函数（e）{
xmouse=e.clientX | | e.pageX；
ymouse=e.clientY | e.pageY；
});
var ball=$（“#ball”）；
var x=无效0，
y=0，
dx=void 0，
dy=void 0，
tx=0，
ty=0，
键=-1；
var followMouse=函数followMouse（）{
key=requestAnimationFrame（跟随鼠标）；
如果（！x | |！y）{
x=xmouse；
y=ymouse；
}否则{
dx=（xmouse-x）*0.125；
dy=（y使用-y）*0.125；
if（数学abs（dx）+数学abs（dy）<0.1）{
x=xmouse；
y=ymouse；
}否则{
x+=dx；
y+=dy；
}
}
ball.style.left=x+'px'；
ball.style.top=y+'px'；
};

[EDIT]更新您的问题做得很好，演示和问题现在都很清楚了。不要担心你的演示不会滚动，我只是在我的演示中添加了一些高度的div来模拟它。以下是您需要/应该更改的所有内容，以使其正常工作：

var followMouse=function followMouse（）…

的语法非常奇怪，我不确定确切的结果会是什么。

• 正常声明函数

  函数followMouse（）…

  ，或使用以下命令之一将其存储在变量中：
  • 函数定义

    var followMouse=function（）…

    或
  • 箭头定义

    var followMouse=（）=>…

为了简单地让它工作，您只需要调整文档的当前滚动量，或者在我的演示中，调整类为“.wrap”的元素。

• 这可以使用

  $（）

  函数返回的对象的

  scrollTop

  成员来完成
• 我刚开始在

  mousemove

  侦听器中的

  ymouse

  变量中添加

  $（“.wrap”）.scrollTop

  ，但在工作时，需要移动鼠标使圆圈实现从页面上滚动
• 因此，我们只需将

  $（“.wrap”）.scrollTop

  添加到

  followMouse

  最后几行中设置为球的css中

我将

overflow

属性从

hidden

更改为

scroll

，因为这就是问题发生的地方；）

我还将

cursor:none

添加到您的

.wrap

css中，这样您就可以获得所需的效果，即除了自定义光标之外，没有光标

var$=document.querySelector.bind（文档）；
var$on=document.addEventListener.bind（文档）；
var followMouse=函数（）{
key=requestAnimationFrame（跟随鼠标）；
如果（！x | |！y）{
x=xmouse；
y=ymouse；
}否则{
dx=（xmouse-x）*0.125；
dy=（y使用-y）*0.125；
if（数学abs（dx）+数学abs（dy）<0.1）{
x=xmouse；
y=ymouse；
}否则{
x+=dx；
y+=dy；
}
}
ball.style.left=x+'px'；
ball.style.top=$（“.wrap”）.scrollTop+y+'px'；
};
var xmouse，ymouse；
var ball=$（“#ball”）；
var x=无效0，
y=0，
dx=void 0，
dy=void 0，
tx=0，
ty=0，
键=-1；
$on（'mousemove'，函数（e）{
xmouse=e.clientX | | e.pageX；
ymouse=e.clientY | e.pageY；
});
正文{
背景：#161616；
}
.包裹{
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
溢出：滚动；
光标：无；
}
#球{
宽度：60px；
高度：60px；
背景：无；
边框：1px纯灰；
边界半径：50%；
位置：绝对位置；
左：50%；
最高：50%；
裕度：-10px0-10px；
指针事件：无；
}
.makeOverflow{
宽度：100px；
高度：300px；
}

这可能会通过将#ball CSS从绝对位置更改为固定位置来修复，然后它应该使用您的原始js向下滚动页面
我更新了格式，谢谢您，对此表示抱歉！如果我忘了什么，请告诉我。编辑：看起来演示现在运行正常，但我不确定如何证明上下滚动页面会导致跟随循环卡住。堆栈溢出不是为您在回答中详述的那种来回对话而构建的。如果你想要这种类型的对话，使用并将最终结果带到这里。否则，其他答案还有什么机会？我的错，不是想抢走任何人的回答机会，而是在我的时间里，所以我经常看到由于用户选择在评论中单独讨论，或者因为他们