Reputation: 2858
Those days I watch in youtube great video how to create custom cursor CSS and JS.
So I wrote this code in ReactJS and create almost similar custom cursor effect.But there and small bug when user scroll (without move mouse only scroll) my custom cursor not moving.
Please help how to solve this issue.
state = {
xMain: 0,
yMain: 0,
expand: false
};
componentDidUpdate() {
if (this.state.expand) {
setTimeout(() => {
this.setState({ expand: false });
}, 500);
}
}
handleMouseMove = e => {
const { pageX, pageY } = e;
this.setState({
xMain: pageX,
yMain: pageY
});
};
expandCursor = () => {
this.setState({
expand: true
});
};
render = () => {
const { xMain, yMain } = this.state;
return (
<div
className="container"
onClick={this.expandCursor}
onMouseMove={e => this.handleMouseMove(e)}
>
<div
className={this.state.expand ? "cursor expand" : "cursor"}
style={{
left: xMain,
top: yMain
}}
/>
</div>
);
};
Upvotes: 0
Views: 1707
Reputation: 1084
You need to handle the scroll event. Try something like this.
componentDidUpdate() {
if (this.state.expand) {
setTimeout(_ => {
this.setState({ expand: false });
}, 500);
}
window.addEventListener('scroll', this.handleScroll);
}
handleScroll = e => {
console.log('x');
this.setState({
xMain: e.pageX,
yMain: e.pageY
});
};
Upvotes: 0
Reputation: 1039
I have write this demo.
It has a little delay while scrolling, which is about the performance issue. I haven't come up the way to fix.
Anyway, still hope this helps!
In my opinion, to achieve this needs to consider 2 steps:
Add a scroll event listener
In your code, to add onScroll
in .container
will not working, because when you scroll, only body
element can detect this event.
Hence we have two ways available:
a. Bind vanilla Javascript eventList in lifecycles like this.
b. Make your element scrollable, and bind onScroll
in JSX.
In my code I tried b method. The key is to create a parent wrapper(position: relative; width: 100%;)
for container
, and add the style height: 100%;
to html, body, #root
. I have to say I don't know the real reason why add height: 100%;
would make this work. I learn this by react-sprint
example.
Get the scroll offset for the event, and calculate the position of cursor.
Once the onScroll works, the second thing is : how to calculate the cursor position form scroll event?
I notice that previous wrap
approach made the pageX
, pageY
value changes.
The value is not the offset to the document anymore, it's the offset to the viewport. (I guess it only count in the scroll offset with body.)
And we can use scrollTop
value of scroll event to get the scroll offset from the document:
scrollTop
The Element.scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically.
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
Last step, defined the x,y
properties for scroll event and mouse event individually, then sum up the scrollX
and mouseY
as left
; sum up the scrollY
(the scrolled height) and mouseY
(the y offset of mouse from viewport) as top
.
Upvotes: 2