cursor 相关问题

我在我的反应项目中使用这个自定义光标：光标.js 从“反应”导入反应；导入“./Cursor.scss”；函数游标（）{ 返回（我在我的反应项目中使用这个自定义光标：游标.js import React from "react"; import "./Cursor.scss"; function Cursor() { return ( <div> <h4 class="cursor"></h4> </div> ); } export default Cursor; 游标.scss： @import "/src/Utilities/Varibles.scss"; *{ cursor: none; } .cursor { position: absolute; width: 40px; height: 40px; background: $green; border-radius: 50%; top: var(--y, 0); left: var(--x, 0); transform: translate(-50%, -100%); z-index: 2; mix-blend-mode: difference; pointer-events: none; } 然后我将它导入我的 App.js ... function App() { document.onmousemove = function(e) { document.body.style.setProperty('--x',(e.clientX)+'px'); document.body.style.setProperty('--y',(e.clientY)+'px'); } return ( ... 但是当我滚动超过视口高度的 100% 时，光标不会跟随我的鼠标位置。我真的不知道如何让光标在滚动到页面底部时保持鼠标位置。 App.js没有任何样式，样式在index.scss上： @import "/src/Utilities/Varibles.scss"; html{ scroll-behavior: smooth; } body { background-color: $blue; width: 100vw; height: 100vh; overflow-x: hidden; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ display: flex; flex-direction: column; margin: 0 auto; &::-webkit-scrollbar { display: none; } } 你可以看到这里发生了什么： https://marclopez.oddsolutionslab.com/ 有谁知道如何解决这个问题？解决方案：我弄清楚我做错了什么，我在App.js上添加的需要在Cursor.js上，删除了文档。在 onmousemove 之前并将 pageYoffset 添加到 mouseY 位置 Cursor.js 文件应该如下所示 import React from "react"; import "./Cursor.scss"; function Cursor() { onmousemove = function (e) { console.log("mouse location:", e.clientX, e.clientY+this.window.pageYOffset); document.body.style.setProperty('--x',e.clientX+'px'); document.body.style.setProperty('--y',e.clientY+this.window.pageYOffset+'px'); }; return ( <div> <h4 class="cursor"></h4> </div> ); } export default Cursor; 感谢 KyloDev 的帮助！！

javascript css reactjs cursor mouse

回答 1 投票 0

Custom JS Cursor - 如何限制交错的圆阵列长度以防止个人显示快速移动？

这是一个棘手的问题，我发现了这个模仿墨水刷的很棒的光标但是有一个问题，如果你移动鼠标足够快，这个技巧就会被发现并且错觉会因为多重

javascript animation geometry cursor stroke

回答 0 投票 0

自定义光标不跟随滚动

我正在做一个网站，其中有一个自定义光标，一个绿色圆圈，但是当滚动超过页面高度的 100% 时它不会跟随鼠标。游标的css如下 *{

css reactjs pointers styles cursor

回答 0 投票 0

使用 Angular 以编程方式更改鼠标光标

使用 Angular 以编程方式设置鼠标光标的最佳实践是什么？例如： HTML: 这里有一些内容或者使用 Angular 以编程方式设置鼠标光标的最佳实践是什么？例如： HTML： <div [style.cursor]="cursorStyle">Some content here</div> 或 <div [ngStyle]="{ 'cursor': cursorStyle }">Some content here</div> TS: setCursorPointer() { this.cursorStyle = 'pointer'; } setCursorDefault() { this.cursorStyle = 'default'; } 如果我们只考虑这两个选项，第一个，因为如果您需要绑定多个属性，ngStyle 和 ngClass 更好用，否则 [style.*] or [class.*] 会更好。

javascript angular typescript cursor ng-style

回答 1 投票 0

ORACLE - 运行表列中可用的查询并使用结果插入另一列

我有一个包含 sql 查询的表：表_A ID 描述 SQL 1 Test1 从 test1 组中选择 count(*) by.. 2 Test2 从 test2 组中选择 count(*) by.. 3 Test3 从...中选择计数（*）

oracle select plsql insert cursor

回答 1 投票 0

在 iterm2 中启用鼠标报告时出现奇怪的光标

当我在 iTerm2 中启用“鼠标报告”时，我的 nvim 和 tmux 光标看起来像这样：老鼠我怎样才能去掉中间的这个圆圈？我希望文本选择光标正常。

macos vim cursor tmux iterm2

回答 0 投票 0

Tcl Tk 文本小部件在您仅使用键时跟踪当前行列位置...而不是鼠标

问题是我无知。鼠标左键工作正常重新给我正确的行和列重新当前光标位置但是我想完全避免使用鼠标而只使用按键。