react-scroll-parallax <ParallaxProvider/> 到 div

Question

我正在尝试使用此模块使 react-scroll-parallax 在 div 上工作：https://www.npmjs.com/package/react-scroll-parallax

我正在尝试将视差提供程序设置为不仅指向 body，而且指向特定的 div。我正在尝试引用元素（即 scrollContainer）。

挑战是我在页脚和 header 之间使用了 "scrolling div"，所以在上面做视差是行不通的。

我尝试创建一个 ref 并引用它但没有成功。

文档说将元素引用为 ScrollContainer 的选项： scrollContainer Element：可选地设置溢出的容器并将包含视差元素。默认为 HTML body

 constructor(props) {
    super(props);
    this.myScrollDiv = React.createRef();
  }

/////////////////



<ParallaxProvider scrollContainer={this.myScrollDiv.current}>
     <div className="page-scroller site-wrapper pb-5" ref={this.myScrollDiv}>
               ///Content
     </div>
</ParallaxProvider>

I would love for the .page-scroller div to handle parallax.

Answer 1

免责声明：我从未使用过react-scroll-parallax库。答案是基于源代码。

欢迎来到 Stack Overflow，@stephanesng

当我查看源代码时，我发现了一本 Storybook code snippet。

看来您需要传递 ref 变量本身，而不是 ref.current。

export default class ScrollContainer extends React.Component {
    static defaultProps = {
        scrollAxis: 'vertical',
    };

    constructor() {
        super();
        this.state = {
            scrollContainer: null,
        };
        this.scrollContainer = React.createRef();
    }

    componentDidMount() {
        this.setState({ scrollContainer: this.scrollContainer.current });
    }

    render() {
        return (
            // ............ You pass the `ref` not `ref.current`                        
            <div className="scroll-container" ref={this.scrollContainer}>
                <ParallaxProvider
                    scrollContainer={this.state.scrollContainer}
                    scrollAxis={this.props.scrollAxis}
                >
                    {this.props.children}
                </ParallaxProvider>
            </div>
        );
    }
}

这意味着，您需要将 this.myScrollDiv 而不是 this.myScrollDiv.current 传递给 scrollContainer prop.

此外，您的 ref 需要在 ParallaxProvider 之外。

<div className="page-scroller site-wrapper pb-5" ref={this.myScrollDiv}>
    <ParallaxProvider scrollContainer={this.myScrollDiv}>
               ///Content
    </ParallaxProvider>
</div>

如果我错了，我会删除答案。

react-scroll-parallax <ParallaxProvider/> 到 div

react-scroll-parallax <ParallaxProvider/> to a div

html

javascript

css

parallax

reactjs