React - Как использовать элементы плавной прокрутки и курсора - PullRequest
Новая
       95

React - Как использовать элементы плавной прокрутки и курсора

0 голосов
/ 25 мая 2020

Я создаю портфолио в React & Gatsby. Я пытаюсь добиться эффекта анимации прокрутки, подобного тому, что можно увидеть на Nana-Asia.com , в котором пользовательский курсор следует за курсором мыши и расширяется при наведении курсора на ссылки.

Мне удалось добиться этого с помощью setState и onMouseMove. Однако я сталкиваюсь с проблемой, которая возникает, когда я начинаю прокрутку. Из-за эффекта плавной полосы прокрутки, который я использую («response-smooth-scrollbar»), созданный мной пользовательский курсор отстает от курсора мыши каждый раз, когда я прокручиваю. Чем дальше я прокручиваю страницу, тем больше отстает курсор. 

class Cursor extends React.Component {
  constructor(props) {
    super(props)
    this.state = { x: 0, y: 0 }
  }

  _onMouseMove(e) {
    this.setState({ x: e.screenX, y: e.screenY })
  }

  render() {
    const { x, y } = this.state
    return (
      <div className="siteContent" onMouseMove={this._onMouseMove.bind(this)}>
        <StyledCursor style={{ top: x, left: y }} />
        {this.props.children}
      </div>
    )
  }
}

Есть ли у меня способ заставить пользовательский элемент курсора «refre sh» менять свое положение каждый раз при прокрутке?

...