2

我的项目有一个问题，我有一个带有完整图像的页面与库机车滚动一起显示，但是要滚动页面，我需要先调整他的大小。我该如何解决这个问题以避免之前调整我的窗口大小滚动页面我使用的是4.1.0版本的机车滚动，目前是最后一个。

您可以在此链接中看到问题： 网站演示

我的代码如下：

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>
    );
}

}

4

0 回答 0