问题：

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

沈淇

2023-03-14

我在我的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

共有2个答案

卓星波

2023-03-14

这可能会通过将#ball CSS从绝对定位到一个固定的位置来修复，然后它应该用您的原始js向下滚动页面

印季

2023-03-14

[编辑]在更新你的问题上做得很好，演示和问题现在都很清楚了。不要担心你的演示没有滚动，我只是在我的演示中添加了一些高度的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>

类似资料：

跟随页面滚动效果

跟随页面滚动非常的简单，就是设置元素的top值即可，代码量只有20行。 1.准备 HTML <div class="roll"> </div> 2.准备css 一定要记得把动画个加上 body{ min-height: 4000px; } .roll{ position: relati
如何使JScrollPane滚动以跟随输入焦点？

问题内容：我有一个带有大型面板的Swing应用程序，该应用程序包装在。用户通常通过按Tab键在面板的子组件之间移动，因此当他们按Tab键切换到某个视图时，我希望滚动窗格自动滚动，以便具有输入焦点的组件始终可见。我尝试使用侦听输入焦点更改，然后调用。这是一个显示我当前策略的SSCCE（只需复制/粘贴并运行！）：如果运行此示例，您会发现它运行不佳。它确实获得了焦点更改通知，但是对的调用似乎没有
如何使Go HTTP客户端不自动跟随重定向？

问题内容：我目前正在用Go语言编写一些与REST API交互的软件。我正在尝试查询的REST API端点返回HTTP 302重定向以及HTTP Location标头，指向资源URI。我正在尝试使用Go脚本抓取HTTP Location标头，以供以后处理。这是我目前为实现此功能正在做的事情：对我来说，这有点像是个骇客。通过覆盖的功能，我实际上被迫将HTTP重定向视为错误（不是）。我已经看到
SnakeGame如何使尾巴跟随头部？

问题内容：我正在做蛇游戏，并且被困在使尾巴跟着头部的位置。我听说在头和尾上使用添加和删除操作可能会发生这种情况，但是我不知道从哪里开始。到目前为止，这是我的代码： Screen.java BodyPart.java 框架现在这段代码只会使尾巴翻转到水平或垂直方向，是否可以通过使用此代码使尾巴跟随头部？还是我需要更改代码？谢谢问题答案：基本思想是，您需要某种包含蛇的所有点的东西。从概念上
文件跟随-Tailer

由来有时候我们要启动一个线程实时“监控”文件的变化，比如有新内容写出到文件时，我们可以及时打印出来，这个功能非常类似于Linux下的tail -f命令。使用 Tailer tailer = new Tailer(FileUtil.file("f:/test/test.log"), Tailer.CONSOLE_HANDLER, 2); tailer.start(); 其中Tailer.CON
bootstrap监听滚动实现头部跟随滚动

本文向大家介绍bootstrap监听滚动实现头部跟随滚动，包括了bootstrap监听滚动实现头部跟随滚动的使用技巧和注意事项，需要的朋友参考一下本文实例为大家分享了bootstrap监听滚动头部跟随滚动的实现方法，供大家参考，具体内容如下实现案例 css控制样式 js监听导入js 知识只有共享才能传播，才能推崇出新的知识，才能学到更多，这里写的每一篇文字/博客，基本都是从网上查询了一下资料

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

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档