React Materialize Parallax 图像不随背景滚动答案

【问题标题】：React Materialize Parallax image is not scrolling with backgroundReact Materialize Parallax 图像不随背景滚动
【发布时间】：2019-08-16 00:05:07
【问题描述】：

我正在尝试将 react-materiallize 中的视差用于投资组合网站。我的图像在视差中工作，但它似乎没有滚动。

我已经在 index.html 文件中的材料 CSS 之前加载了 JQuery

import React, { Component } from 'react'
import {Parallax, Row} from 'react-materialize'



export default class ParalaxComponent extends Component {

  render(){
    debugger
    return (
      <Row>
        <Parallax imageSrc="https://www.thoughtco.com/thmb/DF3Q0T5_0O5CmGBTCWCBTcyGgmw=/768x0/filters:no_upscale():max_bytes(150000):strip_icc()/JavaScript-58acbb8a3df78c345bad32c2.jpg"></Parallax>
      </Row>
     )
  }
}

图像显示，但动画未触发，谢谢您的帮助。

这是github 上的应用程序，如果这是调试问题的更简单方法。

【问题讨论】：

快速演示在这里会有所帮助。任何控制台错误？
github.com/harryFBloch/portfolio
我把它推到了 github 我不知道还有什么方法可以给你一个快速的演示没有任何控制台错误

标签： javascript jquery html reactjs materialize

【解决方案1】：

最终改用“npm react-parallax”。有很棒的文档和一个演示应用程序here

【讨论】：

为什么要为所有这些小事使用 npm 模块，首先你从 materialize-CSS 转移到 react-materialize（react-Materialize 在其 package.json 中将 materialize-css 作为依赖项）。所以间接地你使用了materialize-CSS。现在您正在使用 react-parallax，仅用于视差，如果您愿意，那么这可以仅使用 materialize-CSS 来完成，为什么要使用太多的 npm 模块并使您的应用程序变慢。检查这个 - github.com/GermaVinsmoke/Reactize?files=1
我使用了 react-parallax，因为 react-materialize 视差对我不起作用，我找不到解决方案。我在应用程序的其余样式中使用 materialize。