[英]React.JS - Custom Cursor not following with scroll
This is my first question on stackoverflow, I'm a junior front-end developper and I'm struggling with a custom cursor for my portfolio.这是我关于 stackoverflow 的第一个问题,我是一名初级前端开发人员,我正在为我的投资组合使用自定义光标而苦苦挣扎。
The problem I'm facing is that the custom cursor is not following the mouse when I'm scrolling.我面临的问题是自定义光标在我滚动时没有跟随鼠标。
This is what I did for the onMouseMove and it work very well :这就是我为 onMouseMove 所做的,效果很好:
<div onMouseMove={mousePosition} onMouseLeave={hideCursor} onMouseEnter={showCursor} className="app">
const mousePosition = event => {
cursor.current.setAttribute('style', `top:${event.clientY + window.pageYOffset - 15}px; left:${event.clientX - 15}px;`);
};
Now to handle the scroll issue I put an event listener on scroll :现在为了处理滚动问题,我在 scroll 上放置了一个事件监听器:
window.addEventListener('scroll', mousePositionWithScroll);
And I've tried to write a function to update the cursor position but without sucess.而且我尝试编写一个函数来更新光标位置但没有成功。 This is my last attempt :
这是我最后一次尝试:
const mousePositionWithScroll = event => {
const cursorPositionTop = parseInt(cursor.current.style.top, 10);
const cursorPositionLeft = parseInt(cursor.current.style.left, 10);
const windowY = window.pageYOffset;
const windowX = window.pageXOffset;
const scrollCursorPositionTop = cursorPositionTop + windowY;
const scrollCursorPositionLeft = cursorPositionLeft + windowX;
cursor.current.setAttribute('style', `top:${scrollCursorPositionTop - 15}px; left:${scrollCursorPositionLeft - 15}px;`);
};
I've tried to use the state to handle this, It worked in a way but I had some serious performance issue.我试图使用状态来处理这个问题,它在某种程度上起作用,但我遇到了一些严重的性能问题。 I tried to use window.pageYOffset and window.pageXOffset but didn't really work.
我尝试使用 window.pageYOffset 和 window.pageXOffset 但并没有真正起作用。
This is all my app component :这是我所有的应用程序组件:
// == Import
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { hideCustomCursor, showCustomCursor } from 'src/actions';
import Header from 'src/components/Header';
import Portfolio from 'src/components/Portfolio';
import MainTitile from 'src/components/MainTitle';
import TopButton from 'src/components/TopButton';
import ServicesSkill from 'src/components/ServicesSkill';
import About from 'src/components/About';
import Contact from 'src/components/Contact';
import CustomCursor from 'src/components/CustomCursor';
import './styles.scss';
// == Composant
function App() {
const dispatch = useDispatch();
const customCursorVisible = useSelector((state) => state.customCursorVisible);
const cursor = React.createRef();
const mousePosition = event => {
cursor.current.setAttribute('style', `top:${event.clientY + window.pageYOffset - 15}px; left:${event.clientX - 15}px;`);
};
const mousePositionWithScroll = event => {
const cursorPositionTop = parseInt(cursor.current.style.top, 10);
const cursorPositionLeft = parseInt(cursor.current.style.left, 10);
const windowY = window.pageYOffset;
const windowX = window.pageXOffset;
const scrollCursorPositionTop = cursorPositionTop + windowY;
const scrollCursorPositionLeft = cursorPositionLeft + windowX;
cursor.current.setAttribute('style', `top:${scrollCursorPositionTop - 15}px; left:${scrollCursorPositionLeft - 15}px;`);
};
const hideCursor = () => {
dispatch(hideCustomCursor());
};
const showCursor = () => {
dispatch(showCustomCursor());
};
window.addEventListener('scroll', mousePositionWithScroll);
return (
<div onMouseMove={mousePosition} onMouseLeave={hideCursor} onMouseEnter={showCursor} className="app">
{ customCursorVisible && (<CustomCursor ref={cursor} />)}
<Header />
<TopButton />
<MainTitile />
<ServicesSkill />
<Portfolio />
<About />
<Contact />
</div>
);
}
// == Export
export default App;
Do you have an idea to handle this issues ?你有处理这个问题的想法吗?
Okay, I found a solution.好的,我找到了解决方案。 I switched the custom cursor position from absolute to fixed and then had to delete the
window.pageYOffset
from this line : `我将自定义光标位置从绝对切换到固定,然后不得不从该行删除
window.pageYOffset
:`
cursor.current.setAttribute('style', `top:${event.clientY + window.pageYOffset - 15}px; left:${event.clientX - 15}px;`);.
It works perfectly fine now.它现在工作得很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.