防止在滚动时仅滚动页面中心文本滚动

Question

我需要在模块中获得帮助，将文本滚动到带有动画的中心位置而无需滚动页面。在这里，我的文字是从API动态获取。在此，文字应位于动画的中心。我尝试了通过onWheel事件更改使用JavaScript的几种方法，并使用了名为react-scroll-wheel-handler的库，这仅有助于在一个位置居中和滚动，但无法在其中添加动画。

我有一个我们正在尝试实现的网站参考链接，请提供帮助。

https://www.makereign.com/

在这里，您可以看到文本在原位滚动而不滚动页面。

class Index extends Component {

constructor(props) {
    super(props);
    AOS.init();
    this.state = {
        aboutPage: {
            _id: "",
            imageUrl: "",
            backgroundColor: "",
            textFiled: [],
            currentIndex: 0,
        },

        success: false,
        loading: false,
        confirm_delete: true,
        message: '',
        currentIndex: 0,
        flag: false,
    }
};

nextIndex = () => {
    const { currentIndex} = this.state;
    const {textFiled}= this.props.pages.aboutUsPage;
    if (currentIndex >= textFiled.length ) {

        return this.setState({currentIndex: textFiled.length});
    }

    return this.setState({
        currentIndex: currentIndex + 1,
        flag: true
    });

};

prevIndex = () => {
    const { currentIndex} = this.state;
    const {textFiled}= this.props.pages.aboutUsPage;

    //document.getElementById("animation").setAttribute("data-aos", "zoom-in-up");

    if (currentIndex == 0) {

        return this.setState({
            currentIndex: 0,
            flag: true
        });
    }

    return this.setState({
        currentIndex: currentIndex - 1
    });
};


componentDidMount() {
    // FullScrollHide();
    this.fetchAboutUsDetails();
    this.props.dispatch(getAboutUsPage());
}

fetchAboutUsDetails = () => {

    axios.get(url + "/about/get")
        .then(res => {

            this.setState({loading: false});
            if (!res.data.message) {
                this.setState({aboutPage: res.data});
            }
        })
};

addNewText=()=>{return(
    <div>

    </div>
)}



render() {

    // console.log("imageUrl, backgroundColor, sideText", imageUrl, backgroundColor, sideText)

    const {loading} = this.state;

    let {_id, imageUrl, backgroundColor, textFiled} = this.state.aboutPage;
    const {data, currentIndex} = this.state;
    console.log("currentIndex",currentIndex);

    return (

        <div className="row">

            {
                this.props.pages.aboutUsPage ?
                    <>

                        <div className="col-1" style={{background: this.props.pages.aboutUsPage.backgroundColor}}>
                            <SideHeader
                                background={this.props.pages.aboutUsPage.backgroundColor}
                            />
                        </div>
                        <div className="col-11 " style={{background: this.props.pages.aboutUsPage.backgroundColor}}>

                            {/* Animated Image*/}


                            <div  style={{color:"white"}}>
                                {
                                    this.props.pages.aboutUsPage.textFiled ?
                                        <ReactScrollWheelHandler
                                            upHandler={this.prevIndex}
                                            downHandler={this.nextIndex}
                                            timeout={300}
                                            customStyle={{
                                                width: "100%",
                                                height: "100vh",
                                                transition: ".5s ease-out"
                                            }}
                                        >
                                                <h1 >
                                                    {
                                                        currentIndex === 0 ?<div className="about_img ">
                                                                <div   className="aboutUs_image_center container" style={{background: this.props.pages.aboutUsPage.backgroundColor}}>
                                                                    <Animate_Image
                                                                        width="100%"
                                                                        height="auto"
                                                                        Image={this.props.pages.aboutUsPage.imageUrl}
                                                                    />
                                                                </div>
                                                            </div>:
                                                            <Zoom>
                                                            <div id={currentIndex}  className="image_center"
                                                                   style={{background: this.props.pages.aboutUsPage.backgroundColor}}>
                                                                <div>
                                                                    <span  data-aos="zoom-in" className="about_text" dangerouslySetInnerHTML={{__html: this.props.pages.aboutUsPage.textFiled[currentIndex-1]}}/>
                                                                </div>
                                                            </div>
                                                            </Zoom>
                                                    }
                                            </h1>
                                        </ReactScrollWheelHandler> : null
                                }


                            </div>
                        </div>

                    </>:null
            }

        </div>
    );
}