Is there any way to run asscroll package in react project?-CodePudding

I was searching a few libraries for scroll animations and I found a very good npm package called @ashthornton/asscroll and I wanted to use the same on my react project.

But I am not been able to implement the same. It's not working the way it should. Can someone help me implement the same package in react?

Here, are the links for asscroll package and a Codesandbox for anyone to give it a try.

CodePudding user response：

import React from "react";
import ASScroll from "@ashthornton/asscroll";
import "./styles.css";

class App extends React.Component {
  componentDidMount() {
    const pageEl = document.querySelector(".page");

    this.asscroll = new ASScroll({
      // containerElement: '.my-container',
      scrollElements: pageEl,
      ease: 0.1,
      touchEase: 1,
      customScrollbar: true,
      scrollbarEl: ".my-scrollbar",
      scrollbarHandleEl: ".my-scrollbar-handle",
      scrollbarStyles: true,
      disableNativeScrollbar: true,
      touchScrollType: "scrollTop",
      disableRaf: true,
      disableResize: true,
      limitLerpRate: true,
      blockScrollClass: ".asscroll-block"
    });

    this.asscroll.enable();

    requestAnimationFrame(this.onRaf);
  }

  onRaf = () => {
    this.asscroll.update();
    requestAnimationFrame(this.onRaf);
  };

  render() {
    return (
      <div asscroll-container="true">
        <div >
          <img
            src="https://raw.githubusercontent.com/ashthornton-gc/asscroll/master/docs/banner.jpg"
            alt=""
          />

          <div >
            <h1 >
              <span>A</span>
              <span>S</span>
              <span>S</span>
              <span>C</span>
              <span>R</span>
              <span>O</span>
              <span>L</span>
              <span>L</span>
              <span>