React和Parallax :单击页面内导航链接时错位的视差图像
React和Parallax :单击页面内导航链接时错位的视差图像
提问于 2019-12-19 20:41:33
我正在使用一个名为Rellax的React库在我的网站上实现视差效果。当我滚动到页面的这一部分时，它工作得很好。但是，当我单击导航栏并导航到特定的#部分时，这个非常视差的图像正以与它应该放置的位置完全不同的距离浮动。
我有一种感觉，这与元素的位置是如何计算有关的，因为我的页面结构没有单一的主体，而是一组react组件。
其他视差库也出现了同样的问题。
现在，我以这种方式引用视差组件：(代码经过简化，仅显示我引用效果的部分)
export default function Advantages() {
useEffect(() => {
// init parallax
new Rellax('#parallaxImage', {
center: true,
});
});
return (
<section>
<img
id="parallaxImage"
className="w-100"
data-rellax-speed="2"
src={ traktor }
alt="tractor parallax" />
</section>
)}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-12-28 15:05:56
你不应该只调用一次(通过添加方括号)吗？
useEffect(() => {
// init parallax
new Rellax('#parallaxImage', {
center: true,
});
}, []); // <-- Empty array页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59416652
复制相关文章
相似问题
parallax.js视差-滑块视差内容和图像
在parallax.js中更改视差图像
Parallax页面中的CSS导航栏
当我点击导航菜单时滚动页面视差(视差滚动)
单击链接时导航到不同的页面
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
