如何使自定义跟随光标跟随Y轴滚动 [英] How to make custom follow cursor follow Y axis scroll
问题描述
我正在使用一些HTML&在我的Squarespace网站上创建CSS，以创建自定义跟随光标.我只想有一个没有显示实际光标的浮动圆圈.我已经知道它可以正常工作，但是当我的网站滚动时，跟随光标不会随着页面滚动而移动，只会卡在顶部.
I'm using a bit of HTML & CSS on my squarespace site to create a custom follow cursor. I want to just have a floaty circle with no actual cursor displayed. I've gotten it to mostly work, but when my site scrolls the follow cursor doesn't move with the page scroll and just gets stuck at the top.
这只是导致跟随光标完全停止移动，而在页面中心变为静态.
And that just caused the follow cursor to stop moving with mouse movement entirely, becoming static on the center of the page.
注入HTML&在Squarespace网站上创建CSS，以创建自定义跟随游标:
Injecting HTML & CSS on to squarespace site to create a custom follow cursor:
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>推荐答案
在更新您的问题上做得很好，演示和问题现在都非常清楚了.不用担心您的演示无法滚动，我只是在演示中添加了一堆具有一定高度的div以进行模拟.要使所有功能正常运行，您需要/应该对其进行以下所有更改:
Great job on updating your question, the demo and the problem are very clear now. Don't worry about your demo not scrolling, I just added a bunch of divs with some height in my demo to simulate that. Here's everything you need to / should change to make it all work:
-
var followMouse = function followMouse()...的语法非常奇怪，我不确定确切的结果是什么.- 要么正常声明函数，要么
function followMouse()...，或者使用以下任一方法将其存储在变量中:- 函数定义
var followMouse = function()...或 - 箭头定义
var followMouse =()=>...
- 函数定义
- 要么正常声明函数，要么
var followMouse = function followMouse() ...is very strange syntax and I'm not sure what the exact outcome will be.- Either declare the function normally
function followMouse() ..., or store it in a variable using either the:- function definition
var followMouse = function() ...or - arrow definition
var followMouse = () => ...
- function definition
- Either declare the function normally
- 这可以通过
$()函数返回的对象的scrollTop成员来完成. - 我首先将
$(.wrap").scrollTop添加到mousemove侦听器中的ymouse变量中，但是的工作原理是，您需要将鼠标移到圆圈上才能实现将其滚动到页面之外. - 因此，我们只是将
$(.wrap").scrollTop添加到在followMouse的最后一行中设置为球的css中.
- This can be done using the
scrollTopmember of the object returned by your$()function. - I started by just adding
$(".wrap").scrollTopto theymousevariable in themousemovelistener, but while this works it needs you to move the mouse for the circle to realize it's scrolled off the page. - So instead we just add
$(".wrap").scrollTopto the css that is being set to the ball in the last lines offollowMouse.
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>这篇关于如何使自定义跟随光标跟随Y轴滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
