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

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

这只会导致跟随光标完全停止移动，在页面中心变成静态。

注入HTML&CSS在squarespace网站上创建自定义跟随光标：

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>

[EDIT]更新问题做得很好，演示和问题现在都很清楚了。不要担心你的演示不滚动，我只是在演示中添加了一堆有一定高度的div来模拟它。以下是你需要/应该改变的一切，以使其发挥作用：

var followMouse = function followMouse() ...是一个非常奇怪的语法，我不确定确切的结果会是什么。
- 正常声明函数function followMouse() ...，或使用以下任一项将其存储在变量中：
  - 函数定义var followMouse = function() ...或
  - 箭头定义var followMouse = () => ...
为了简单地让它发挥作用，你只需要调整文档的当前滚动量，或者在我的演示中，调整类为".wrap"的元素。
- 这可以使用$()函数返回的对象的scrollTop成员来完成
- 我一开始只是将$(".wrap").scrollTop添加到mousemove侦听器中的ymouse变量中，但当这起作用时，需要将鼠标移动到圆圈上，才能意识到它已从页面上滚动下来
- 因此，我们只需将$(".wrap").scrollTop添加到在followMouse的最后一行中设置为球的css中
我将overflow属性从hidden更改为scroll，因为这就是问题发生的地方；)
我还将cursor: none添加到了.wrapcss中，这样您就可以获得所需的效果，即没有光标，而是自定义光标

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 向下滚动页面

相关内容

最新更新

热门标签：