Question

我在我的Squarespace网站上使用了一些HTML和CSS来创建自定义跟随游标。我只想有一个没有显示实际光标的浮动圆圈。我已经知道它可以正常工作，但是当我的网站滚动时，跟随光标不会随着页面滚动而移动，只会卡在顶部。

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

将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>

Answer 1

[EDIT]在更新您的问题上做得很好，演示和问题现在非常清楚。不用担心您的演示无法滚动，我只是在演示中添加了一堆具有一定高度的div来进行模拟。要使所有功能正常运行，您需要/应该对其进行以下更改：

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

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>

Answer 2

这可能是通过将#ball CSS从绝对位置更改为固定位置来解决的，然后应使用原始js向下滚动页面

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

2 个答案: