javascript - 反应滚动视差到一个 div
问题描述
我正在尝试使用此模块使 react-scroll-parallax 在 div 上工作:https ://www.npmjs.com/package/react-scroll-parallax
我正在尝试将视差提供程序设置为不仅指向主体,而且指向特定的 div。我正在尝试引用元素(即 scrollContainer)。
挑战在于我在页脚和页眉之间使用了“滚动 div”,因此在页脚和页眉之间进行视差是行不通的。
我试图创建一个 ref 并在没有成功的情况下引用它。
文档说引用一个元素作为 ScrollContainer 的一个选项: scrollContainer 元素:可选择设置具有溢出并包含视差元素的容器。默认为 HTML 正文
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.
解决方案
免责声明:我从未使用过react-scroll-parallax库。答案基于源代码。
欢迎来到 Stack Overflow,@stephanesng
当我查看源代码时,我发现了一个 Storybook代码片段。
看起来您需要传递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
。
而且,您ref
需要在ParallaxProvider
.
<div className="page-scroller site-wrapper pb-5" ref={this.myScrollDiv}>
<ParallaxProvider scrollContainer={this.myScrollDiv}>
///Content
</ParallaxProvider>
</div>
如果我错了,我会删除答案。
推荐阅读
- node.js - Kubernetes ECONNRESET nodejs
- data-visualization - Tableau 如何根据两个字段为图表着色,一个是连续的,另一个是离散的
- unity3d - unity调整大小布局
- python - 如果出现任何错误,Excel.exe 进程将继续运行
- xquery - Marklogic 提交帧/返回序列保证
- c++ - 应该使用什么类型的 C++ 类型转换来将指向结构的指针转换为它的第一个成员?
- android - 登录应用程序 - 仅读取我的数据库中的最后一个条目
- python - 解析大型 XML 文件时出现内存错误
- c++ - 无法将大括号括起来的初始值设定项列表转换为映射
- vue.js - 单击标题打开时,我无法删除 v-expansion-panels 上的白色边框。边框只在动画中