Реагируйте, прокручивая к неправильному компоненту - PullRequest
Новая
       41

Реагируйте, прокручивая к неправильному компоненту

0 голосов
/ 03 декабря 2018

Имеет 3 компонента, которые покрывают всю ширину тела и указанную высоту.Мне нужно перейти к предыдущему / следующему компоненту по направлению прокрутки.Я использую событие onWheel, предложенное реагировать, и все хорошо работает с прокруткой и определением направления.Проблема возникает, когда прокручивается вверх / вниз, и появляется неправильный компонент (1-й).

Вот мой код 

import React, { Component } from "react";

class App extends Component {
   state = {
   refObject: {
     1: React.createRef(),
     2: React.createRef(),
     3: React.createRef()
    },
  lastRefId: 0,
  scrollUp: true
};
handleScroll = (event, caller) => {
  let directionUp = event.deltaY < 0 ? true : false;

if (caller !== this.state.lastRefId || this.state.scrollUp !== directionUp) {
    if (directionUp) {
      this.setState({ scrollUp: true });

       if (caller > 1) {
          window.scrollTo({
          top: this.state.refObject[caller - 1],
          behavior: "smooth"
          });
       }
     } else {
       this.setState({ scrollUp: false });
       if (caller < 3) { // since I have 3 components
          window.scrollTo({
          top: this.state.refObject[caller + 1],
          behavior: "smooth"
          });
      }
  }
}
this.setState({ lastRefId: caller, scrollUp: directionUp });
 };  
   render() {
    return (
    <React.Fragment>
    <Component1
      key={1}
      refProp={this.state.refObject[1]}
      onWheel={event => this.handleScroll(event, 1)}
    />
    <Component2
      key={2}
      refProp={this.state.refObject[2]}
      onWheel={event => this.handleScroll(event, 2)}
    />
    <Component3
      key={3}
      refProp={this.state.refObject[3]}
      onWheel={event => this.handleScroll(event, 3)}
    />
  </React.Fragment>
  );
 }
 }
 export default App;

Мои компоненты (1-3), как показано ниже: 

class Component1 extends Component {
state = {};
render() {
 return (
   <React.Fragment>
    <div
      ref={this.props.refProp}
      className="d-flex flex-row mt-0 text-center p-3"
      onWheel={this.props.onWheel}>
      This is a Component
    </div>
    </React.Fragment>
  );
 }
}

Например, когда я прокручиваю вниз на второйкомпонент, который покрывает всю ширину тела, он прокручивается до первого компонента.

Оцените ваши подсказки

1 Ответ

0 голосов
/ 03 декабря 2018

В методе scrollTo мне не хватало текущего объекта и ссылки на атрибут offsetTop.Лучше упомянутое в введите описание ссылки здесь @Kokovin.Таким образом, моя ручка прокрутки должна быть такой: 

handleScroll = (event, caller) => {
    let directionUp = event.deltaY < 0 ? true : false;
    if (caller !== this.state.lastRefId || this.state.scrollUp !== directionUp) {
        if (directionUp) {
        this.setState({ scrollUp: true });
        if (caller > 1) {
           window.scrollTo({
           top: this.state.refObject[caller - 1],
           behavior: "smooth"
         });
        }
     } else {
        this.setState({ scrollUp: false });
        if (caller < 3) { // since I have 3 components
            window.scrollTo({
            top: this.state.refObject[caller + 1],
            behavior: "smooth"
           });
      }
    }
  } 
  this.setState({ lastRefId: caller, scrollUp: directionUp });
  };
...