我在我的squarespace站点上使用了一些HTML&CSS来创建一个自定义的跟随光标。我只想有一个浮动的圆圈，没有实际的光标显示。我已经得到了它的工作，但当我的网站滚动跟随光标没有移动的页面滚动，只是卡在顶部。
这只会导致follow光标完全停止随鼠标移动而移动，在页面中心变成静态的。
将HTML&CSS注入到squarespace站点以创建自定义跟随光标：
null
body {
background: #161616;
}
.wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
#ball {
width: 60px;
height: 60px;
background: none;
border: 1px solid grey;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
margin: -10px 0 0 -10px;
pointer-events: none;
}<body onload="followMouse();">
<div class="wrap">
<div id="ball"></div>
</div>
<script type="text/javascript">
var $ = document.querySelector.bind(document);
var $on = document.addEventListener.bind(document);
var xmouse, ymouse;
$on('mousemove', function (e) {
xmouse = e.clientX || e.pageX;
ymouse = e.clientY || e.pageY;
});
var ball = $('#ball');
var x = void 0,
y = void 0,
dx = void 0,
dy = void 0,
tx = 0,
ty = 0,
key = -1;
var followMouse = function followMouse() {
key = requestAnimationFrame(followMouse);
if(!x || !y) {
x = xmouse;
y = ymouse;
} else {
dx = (xmouse - x) * 0.125;
dy = (ymouse - y) * 0.125;
if(Math.abs(dx) + Math.abs(dy) < 0.1) {
x = xmouse;
y = ymouse;
} else {
x += dx;
y += dy;
}
}
ball.style.left = x + 'px';
ball.style.top = y + 'px';
};
</script>
</body>null
[编辑]在更新你的问题上做得很好，演示和问题现在都很清楚了。不要担心你的演示没有滚动，我只是在我的演示中添加了一些高度的div来模拟这一点。以下是您需要/应该更改的所有内容，以使其正常工作：
var followMouse=function followMouse()...是一个非常奇怪的语法，我不确定会有什么确切的结果。
函数followMouse()...或使用以下属性将其存储在变量中：
var followMouse=function()...或var followMouse=（）=>...$()函数返回的对象的scrolltop成员来完成。$（“.wrap”）.scrolltop添加到mouseVe侦听器中的ymouse变量中，但这一操作起作用时，需要您移动鼠标以找到圆圈，以实现它已从页面上滚动。$（“.wrap”）.scrolltop添加到css中，该css被设置为followmouse的最后一行中的球。null
var $ = document.querySelector.bind(document);
var $on = document.addEventListener.bind(document);
var followMouse = function() {
key = requestAnimationFrame(followMouse);
if (!x || !y) {
x = xmouse;
y = ymouse;
} else {
dx = (xmouse - x) * 0.125;
dy = (ymouse - y) * 0.125;
if (Math.abs(dx) + Math.abs(dy) < 0.1) {
x = xmouse;
y = ymouse;
} else {
x += dx;
y += dy;
}
}
ball.style.left = x + 'px';
ball.style.top = $(".wrap").scrollTop + y + 'px';
};
var xmouse, ymouse;
var ball = $('#ball');
var x = void 0,
y = void 0,
dx = void 0,
dy = void 0,
tx = 0,
ty = 0,
key = -1;
$on('mousemove', function(e) {
xmouse = e.clientX || e.pageX;
ymouse = e.clientY || e.pageY;
});body {
background: #161616;
}
.wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: scroll;
cursor: none;
}
#ball {
width: 60px;
height: 60px;
background: none;
border: 1px solid grey;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
margin: -10px 0 0 -10px;
pointer-events: none;
}
.makeOverflow {
width: 100px;
height: 300px;
}<body onload="followMouse();">
<div class="wrap">
<div id="ball"></div>
<div class="makeOverflow"> </div>
<div class="makeOverflow"> </div>
<div class="makeOverflow"> </div>
<div class="makeOverflow"> </div>
</div>
</body>
这可能会通过将#ball CSS从绝对定位到一个固定的位置来修复，然后它应该用您的原始js向下滚动页面
