0

Как осуществить переходы между route с помощью прокрутки мыши?

Может есть еще какие то способы react routes + scrollUp/scrollDown ?

     import React, { Component } from "react";

    <Menu pageWrapId={ "reveal" } className="Main-menu" outerContainerId={ "reveal" } right width={ '515px' }  >
      <NavLink activeClassName='active' to="/" exact={true} >Главная</NavLink>
      <NavLink activeClassName='active' to="/about" >О нас</NavLink>
      <NavLink activeClassName='active' to="/products">Продукты</NavLink>
      <NavLink activeClassName='active' to="/partners">Партнеры</NavLink>
      <NavLink activeClassName='active'  to="/portfolio">Портфолио</NavLink>
      <NavLink activeClassName='active'  to="/contact">Контакты</NavLink>
    </Menu>

    <Route exact path="/" component={Home} />
    <Route path={this.props.history} component={About} />
    <Route path="/products" component={Products} />
    <Route path="/partners" component={Partners} />
    <Route path="/portfolio" component={Portfolio} />
    <Route path="/contact" component={Contact} />
2
  • Вообще переходы по роутам с помощью скролла - это обычные якоря на странице. Вот тут почитай. w3schools.com/html/html_links.asp
    – CoonJS
    9 апр 2018 в 12:02
  • мне нужно осуществлять переходы по route прокруткой мыши
    – max
    10 апр 2018 в 5:14

1 ответ 1

1

Вам нужно повесить обработчик на scroll событие для window, в котором согласно логике вашего приложения отслеживать позицию по вертикали и определять какой роут необходимо осуществить.

componentDidMount: function() {
    window.addEventListener('scroll', this.handleScroll);
},

componentWillUnmount: function() {
    window.removeEventListener('scroll', this.handleScroll);
},

handleScroll: function(event) {
    let scrollTop = event.srcElement.body.scrollTop;

    // здесь будет логика определения ваших роутов

    // затем, в случае если react-router < 4
    this.props.router.push('/foo-route');
    // в случае если react-router >= 4
    this.props.history.push('/foo-route');
},
1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.