cursor_div wont follow the cursor when I scroll to the bottom

huangapple
go评论93阅读模式
英文:

cursor_div wont follow the cursor when I scroll to the bottom

问题

当我在页面顶部时，curose_div 会完美地跟随鼠标光标。但当我开始向底部滚动时，cursor_div 的位置将不会正确跟随。

以下是我的代码：

  1. <div id="cursor"></div>
  2. <div id="cursor_border"></div>
  1. var cursor = $('#cursor');
  2. var cursor_border = $('#cursor_border');
  4. $(document).mousemove(function(e){
  5.     console.log(e.pageY + ' and '+ e.pageX );
  7.     var x = e.pageX;
  8.     var y = e.pageY;
  9.     cursor.css("left", x+'px');
  10.     cursor.css("top", y+'px');
  12.     cursor_border.css("left", x+'px');
  13.     cursor_border.css("top", y+'px');
  14. });
英文:

When Im at the top of the page. The curose_div will follow the cursor perfectly. But when I start scrolling to the bottom the cursor_div position will not follow correctly.

Heres my code

  1. &lt;div id=&quot;cursor&quot;&lt;/div&gt;&lt;/div id=&quot;cursor_border&quot;&gt;&lt;/div&gt;

<div id="cursor"></div>
<div id="cursor_border"></div>

`var cursor = $('#cursor');
var cursor_border = $('#cursor_border');

  1. $(document).mousemove(function(e){
  2. 	console.log(e.pageY + &#39; and &#39;+ e.pageX ) ;
  4. 	
  5. 	var x = e.pageX;
  6. 	var y = e.pageY;
  7. 	cursor.css(&quot;left&quot;,x+&#39;px&#39;);
  8. 	cursor.css(&quot;top&quot;,y+&#39;px&#39;);
  9. 	
  10. 	cursor_border.css(&quot;left&quot;,x+&#39;px&#39;);
  11. 	cursor_border.css(&quot;top&quot;,y+&#39;px&#39;);`

答案1

得分: 0

以下是要翻译的内容：

这段代码可能会修复错误：

  1. function updateCursor() {
  2.   cursor.style.left = mouseX + 'px';
  3.   cursor.style.top = mouseY + 'px';
  5.   cursorBorder.style.left = mouseX + 'px';
  6.   cursorBorder.style.top = mouseY + 'px';
  8.   requestAnimationFrame(updateCursor);
  9. }
  11. updateCursor();

使用经典的JavaScript可以提高性能，并可能纠正由jQuery引起的错误！
希望这对你有帮助！

英文:

this code may correct the error :

  1.   function updateCursor() {
  2.   cursor.style.left = mouseX + &#39;px&#39;;
  3.   cursor.style.top = mouseY + &#39;px&#39;;
  5.   cursorBorder.style.left = mouseX + &#39;px&#39;;
  6.   cursorBorder.style.top = mouseY + &#39;px&#39;;
  8.   requestAnimationFrame(updateCursor);
  9. }
  11. updateCursor();

The use of classic Javascript can improve the performance, and may correct the error caused by jQuery !
I hope this helped you !

答案2

得分: 0

使用 event.clientX 和 event.clientY 与 #cursor { position: fixed; } 一起：

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. window.onmousemove = event => cursor.style.transform = `translate3d(${event.clientX}px, ${event.clientY}px, 0)`;
  6. <!-- language: lang-css -->
  7. * {
  8.   margin: 0;
  9.   padding: 0;
  10.   box-sizing: border-box;
  11. }
  13. body {
  14.   height: 200vh;
  15.   background-image: linear-gradient(lightgreen, lightblue);
  16. }
  18. #cursor {
  19.   position: fixed;
  20.   width: 24px;
  21.   height: 24px;
  22.   display: none;
  23.   margin: -12px 0 0 -12px;
  24.   border: solid 2px red;
  25.   border-radius: 50%;
  26.   will-change: transform;
  27. }
  29. #cursor[style] {
  30.   display: block;
  31. }
  33. <!-- language: lang-html -->
  34. <div id="cursor"></div>
  36. <!-- end snippet -->
英文:

Use event.clientX and event.clientY together with #cursor { position: fixed; }:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. window.onmousemove = event =&gt; cursor.style.transform = `translate3d(${event.clientX}px, ${event.clientY}px, 0)`;

<!-- language: lang-css -->

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   height: 200vh;
  9.   background-image: linear-gradient(lightgreen, lightblue);
  10. }
  12. #cursor {
  13.   position: fixed;
  14.   width: 24px;
  15.   height: 24px;
  16.   display: none;
  17.   margin: -12px 0 0 -12px;
  18.   border: solid 2px red;
  19.   border-radius: 50%;
  20.   will-change: transform;
  21. }
  23. #cursor[style] {
  24.   display: block;
  25. }

<!-- language: lang-html -->

  1. &lt;div id=&quot;cursor&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月8日 15:51:49
  • 转载请务必保留本文链接：https://go.coder-hub.com/76429712.html
  • css
  • html
  • javascript
  • jquery
  • mousemove
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定