ReactJS custom cursor effect:Cursor not working when user scroll

Question

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.

Codesandbox

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>
    );
  };

score 2 · Accepted Answer · answered Aug 06 '19 at 10:54

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.

score 0 · Answer 2 · answered Aug 06 '19 at 11:05

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
    });
  };

ReactJS custom cursor effect:Cursor not working when user scroll

2 Answers2