有什么方法可以 运行 asscroll package in react project 吗？

Question

我在几个库中搜索滚动动画，我发现了一个非常好的 npm 包，叫做 @ashthornton/asscroll，我想在我的 React 项目中使用它.

但我无法实现相同的功能。它没有按应有的方式工作。有人可以帮我在 React 中实现相同的包吗？

这里是 asscroll package and a Codesandbox 的链接，任何人都可以尝试一下。

Answer 1

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 class="page">
          <img
            src="https://raw.githubusercontent.com/ashthornton-gc/asscroll/master/docs/banner.jpg"
            alt=""
          />

          <div class="content">
            <h1 class="title">
              <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></span>
            </h1>
            <div>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
                ornare quis nibh eget convallis. Nam aliquam tempus dolor, at
                blandit elit vulputate eu. Mauris iaculis sem at nulla euismod
                auctor. Duis dui risus, lacinia quis fringilla a, dictum a
                lectus. Aliquam id dui a nisi dignissim aliquet nec sed augue.
                Vestibulum congue felis sit amet iaculis scelerisque. Vivamus
                facilisis lacus sit amet eros eleifend dapibus in eget neque.
                Aliquam nisi urna, porttitor et nisi in, pretium lacinia orci.
                Cras vitae leo posuere, condimentum magna et, vulputate mi.
                Nullam maximus ullamcorper leo eu auctor. Quisque eget fermentum
                est, aliquet cursus libero. Sed scelerisque mauris sed enim
                tristique tempus ornare vestibulum quam. Etiam eget aliquam
                augue. In nec lectus convallis, lobortis risus in, euismod
                lorem. Sed eleifend nisi ut lorem convallis, nec blandit ante
                egestas.
              </p>

              <p>
                Quisque quis tincidunt nunc. In magna est, malesuada quis tempus
                id, fermentum eleifend urna. Fusce facilisis rhoncus nibh, eget
                pellentesque mauris rhoncus ut. Nulla congue vel lacus nec
                pellentesque. Praesent eget elit nisi. Ut eu enim arcu. Duis et
                nisi ligula. Maecenas eu ante eget augue pulvinar efficitur.
                Aenean vitae luctus dolor. Ut iaculis orci ut orci tincidunt, id
                efficitur nulla accumsan. Nullam feugiat porta hendrerit.
                Pellentesque eget fringilla leo. Quisque laoreet ligula quis
                consectetur aliquam.
              </p>

              <p>
                Nam vel auctor nisl. Cras vel suscipit nibh. Donec nec massa
                sagittis, vehicula magna ac, scelerisque velit. Etiam mollis
                felis orci, id placerat ipsum egestas a. Class aptent taciti
                sociosqu ad litora torquent per conubia nostra, per inceptos
                himenaeos. Aenean faucibus vulputate feugiat. Nam condimentum
                arcu urna, id tincidunt nisl rhoncus quis. Duis mauris mi,
                dapibus et nisl at, facilisis tristique lectus. Nam vel felis in
                metus hendrerit placerat ac quis massa. Nam eget turpis nunc.
                Nullam at tincidunt lacus. Nulla viverra magna in nisi semper,
                non interdum nunc tempus. In pellentesque porttitor bibendum.
                Vestibulum blandit congue tempor.
              </p>

              <p>
                Cras congue, nunc et imperdiet porttitor, dui nisl ultricies
                ipsum, sed bibendum neque leo auctor sem. Nam velit ipsum,
                dictum eget dolor pellentesque, pulvinar imperdiet purus.
                Quisque leo dui, eleifend non porttitor quis, auctor convallis
                tortor. Integer vel justo at odio suscipit gravida vitae ut
                tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Mauris sapien urna, iaculis quis magna at, facilisis ultrices
                elit. Maecenas ac elementum metus, sit amet congue nunc.
                Maecenas vitae posuere lectus. Integer maximus neque at nunc
                vestibulum imperdiet. Aenean imperdiet ligula semper nibh
                dapibus facilisis. Pellentesque gravida dignissim lacus, et
                vulputate sapien dapibus commodo. Etiam efficitur facilisis
                sollicitudin. Quisque velit nulla, condimentum ac tellus eget,
                rutrum placerat ipsum. Cras auctor auctor sem sed ullamcorper.
              </p>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Example

Answer 2

为了 运行 它与 React 你需要在 useEffect 中初始化 ASScroll 并确保指出哪个 div 元素是 asscroll-container.

因为这在反应中有点不同，你需要添加到 div asscroll-container="true"（记住 true 有作为字符串传递)。

如您所见，我已将此库添加到我的 codesandbox here