如何解决机车滚动 - 无法滚动需要调整窗口大小之前
我的项目有问题,我有一个显示完整图像的页面,其中显示了库 Locomotive 滚动,但是要滚动页面,我需要先调整他的大小。 我该如何解决这个问题以避免在滚动页面之前调整我的窗口大小 我用的机车卷轴4.1.0版本,目前是最后一个了。
您可以在此链接中查看问题: website demo
我的代码如下:
class distrame extends Component {
componentDidMount() {
gsap.registerPlugin(ScrollTrigger);
// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
this.scroll = new LocomotiveScroll({
el: document.querySelector(".smooth"),smooth: true
});
}
componentwillUnmount() {
this.scroll.destroy()
}
render() {
return (
<div>
<div className="wrapper smooth">
<div data-scroll-container>
<div data-scroll-section>
<div className="container_1_bloc" data-scroll data-scroll-speed="1">
<img className="container_1 z-out" src={require("../img/distrame11.JPG")} alt="distrame capteur details" />
</div>
<div className="block_image_flex bloc_1">
<div className="c-speed-block" data-scroll data-scroll-speed="3" >
<img className="z-out" src={require("../img/distrame5.JPG")} alt="distrame type zone" />
</div>
<div className="c-speed-block" data-scroll data-scroll-speed="-1" >
<img className="z-out" src={require("../img/distrame6.JPG")} alt="distrame alerte" />
</div>
<div className="c-speed-block" data-scroll data-scroll-speed="3" >
<img className="z-out" src={require("../img/distrame7.JPG")} alt="distrame batterie" />
</div>
</div>
</div>
</div>
<div data-scroll-section>
<div className="block_image_flex bloc_2" data-scroll data-scroll-speed="4" >
<div className="item_bloc_2">
<img className="z-out" src={require("../img/distrame8.JPG")} alt="distrame map affichage" />
</div>
<div className="item_bloc_2" >
<img className="z-out" src={require("../img/distrame9.JPG")} alt="distrame zone affichage" />
</div>
</div>
</div>
<div data-scroll-section>
<div className="container_2_bloc bloc_3" data-scroll data-scroll-speed="1" >
<img className="container_2 z-out" src={require("../img/distrame4.JPG")} alt="distrame affichage" />
</div>
</div>
</div>
</div>
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。