javascript — Предотвратить прокрутку страницы только по центру прокрутки текста при прокрутке

Запретить прокрутку страницы только по центру прокрутки текста при прокрутке

Мне нужна помощь в модуле с прокруткой текста в центре позиции с анимацией без прокрутки страницы. Здесь мой текст — динамическое получение из API. Здесь текст должен быть в центре с анимацией. Я попробовал несколько методов, использующих JavaScript, путем изменения события onWheel и использования библиотеки под названиемact-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 = () ={amp}gt; { const { currentIndex} = this.state; const {textFiled}= this.props.pages.aboutUsPage; if (currentIndex {amp}gt;= textFiled.length ) { return this.setState({currentIndex: textFiled.length}); } return this.setState({ currentIndex: currentIndex   1, flag: true }); }; prevIndex = () ={amp}gt; { 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 = () ={amp}gt; { axios.get(url   "/about/get") .then(res ={amp}gt; { this.setState({loading: false}); if (!res.data.message) { this.setState({aboutPage: res.data}); } }) }; addNewText=()={amp}gt;{return( {amp}lt;div{amp}gt; {amp}lt;/div{amp}gt; )} 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 ( {amp}lt;div className="row"{amp}gt; { this.props.pages.aboutUsPage ? {amp}lt;{amp}gt; {amp}lt;div className="col-1" style={{background: this.props.pages.aboutUsPage.backgroundColor}}{amp}gt; {amp}lt;SideHeader background={this.props.pages.aboutUsPage.backgroundColor} /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className="col-11 " style={{background: this.props.pages.aboutUsPage.backgroundColor}}{amp}gt; {/* Animated Image*/} {amp}lt;div style={{color:"white"}}{amp}gt; { this.props.pages.aboutUsPage.textFiled ? {amp}lt;ReactScrollWheelHandler upHandler={this.prevIndex} downHandler={this.nextIndex} timeout={300} customStyle={{ width: "100%", height: "100vh", transition: ".5s ease-out" }} {amp}gt; {amp}lt;h1 {amp}gt; { currentIndex === 0 ?{amp}lt;div className="about_img "{amp}gt; {amp}lt;div className="aboutUs_image_center container" style={{background: this.props.pages.aboutUsPage.backgroundColor}}{amp}gt; {amp}lt;Animate_Image width="100%" height="auto" Image={this.props.pages.aboutUsPage.imageUrl} /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt;: {amp}lt;Zoom{amp}gt; {amp}lt;div id={currentIndex} className="image_center" style={{background: this.props.pages.aboutUsPage.backgroundColor}}{amp}gt; {amp}lt;div{amp}gt; {amp}lt;span data-aos="zoom-in" className="about_text" dangerouslySetInnerHTML={{__html: this.props.pages.aboutUsPage.textFiled[currentIndex-1]}}/{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/Zoom{amp}gt; } {amp}lt;/h1{amp}gt; {amp}lt;/ReactScrollWheelHandler{amp}gt; : null } {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/{amp}gt;:null } {amp}lt;/div{amp}gt; ); } - 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 = () ={amp}gt; { const { currentIndex} = this.state; const {textFiled}= this.props.pages.aboutUsPage; if (currentIndex {amp}gt;= textFiled.length ) { return this.setState({currentIndex: textFiled.length}); } return this.setState({ currentIndex: currentIndex   1, flag: true }); }; prevIndex = () ={amp}gt; { 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 = () ={amp}gt; { axios.get(url   "/about/get") .then(res ={amp}gt; { this.setState({loading: false}); if (!res.data.message) { this.setState({aboutPage: res.data}); } }) }; addNewText=()={amp}gt;{return( {amp}lt;div{amp}gt; {amp}lt;/div{amp}gt; )} 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 ( {amp}lt;div className="row"{amp}gt; { this.props.pages.aboutUsPage ? {amp}lt;{amp}gt; {amp}lt;div className="col-1" style={{background: this.props.pages.aboutUsPage.backgroundColor}}{amp}gt; {amp}lt;SideHeader background={this.props.pages.aboutUsPage.backgroundColor} /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className="col-11 " style={{background: this.props.pages.aboutUsPage.backgroundColor}}{amp}gt; {/* Animated Image*/} {amp}lt;div style={{color:"white"}}{amp}gt; { this.props.pages.aboutUsPage.textFiled ? {amp}lt;ReactScrollWheelHandler upHandler={this.prevIndex} downHandler={this.nextIndex} timeout={300} customStyle={{ width: "100%", height: "100vh", transition: ".5s ease-out" }} {amp}gt; {amp}lt;h1 {amp}gt; { currentIndex === 0 ?{amp}lt;div className="about_img "{amp}gt; {amp}lt;div className="aboutUs_image_center container" style={{background: this.props.pages.aboutUsPage.backgroundColor}}{amp}gt; {amp}lt;Animate_Image width="100%" height="auto" Image={this.props.pages.aboutUsPage.imageUrl} /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt;: {amp}lt;Zoom{amp}gt; {amp}lt;div id={currentIndex} className="image_center" style={{background: this.props.pages.aboutUsPage.backgroundColor}}{amp}gt; {amp}lt;div{amp}gt; {amp}lt;span data-aos="zoom-in" className="about_text" dangerouslySetInnerHTML={{__html: this.props.pages.aboutUsPage.textFiled[currentIndex-1]}}/{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/Zoom{amp}gt; } {amp}lt;/h1{amp}gt; {amp}lt;/ReactScrollWheelHandler{amp}gt; : null } {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/{amp}gt;:null } {amp}lt;/div{amp}gt; ); } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector