机车滚动 - 无法滚动需要调整窗口大小之前

问题描述

我的项目有问题，我有一个显示完整图像的页面，其中显示了库 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 (将#修改为@）