как я могу добавить реакцию прокрутки тела имени класса вниз?

Я хочу, чтобы при прокрутке вниз на 100 пикселей добавить тело className="showdiv" на реакцию Гэтсби.

Как я могу это сделать?

Я пробую этот код:

state = {
  isTop: true,
};

componentDidMount() {
  document.addEventListener('scroll', () => {
    const isTop = window.scrollY < 100;
    if (isTop !== this.state.isTop) {
        this.setState({ isTop })
    }
  });
}

имя класса

{this.state.isTop ? 'down' : 'up'}

Но я не могу добавить класс кузова. Я хочу новую и простую идею ..

Спасибо


reactjs javascript gatsby
person cnsvnc    schedule 12.07.2018    source источник
comment
Вы пробовали window.addEventListener('scroll' вместо этого?   -  person Tholle    schedule 12.07.2018
comment
я не знаю, я новичок, просто я хочу, чтобы при прокрутке вниз на 100 пикселей добавить имя класса тела только это. @Толле   -  person cnsvnc    schedule 12.07.2018
comment
См. stackoverflow.com/a/17457651/5079258.   -  person Alan Friedman    schedule 12.07.2018
comment
@AlanFriedman спасибо за ответ, как я могу использовать этот код в реакции? javascript в порядке, но я не могу работать с реакцией. Вы можете ответить на код реакции на мой вопрос?   -  person cnsvnc    schedule 12.07.2018
comment
Конечно, вы можете использовать его в React. Поскольку body находится за пределами вашего корня React, вам нужно будет использовать императивный JS для установки класса.   -  person Alan Friedman    schedule 12.07.2018
comment
@Tholle только что попробовал этот код, но я не хочу его использовать. я хочу, чтобы когда пользователь прокручивал вниз на 100 пикселей, добавлял класс тела showChildDiv только это.   -  person cnsvnc    schedule 12.07.2018
comment
@Tholle 'body' находится вне корня React, я не могу изменить className, мне нужен простой код.   -  person cnsvnc    schedule 12.07.2018

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете добавить прослушиватель прокрутки, как вы сделали, но вместо этого добавить/удалить класс showChildDiv из тела в зависимости от положения прокрутки.

Пример

class App extends React.Component {
  componentDidMount() {
    window.addEventListener("scroll", this.toggleBodyClass);
    this.toggleBodyClass();
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.toggleBodyClass);
  }

  toggleBodyClass = () => {
    if (window.scrollY < 100) {
      document.body.classList.add("showChildDiv");
    } else {
      document.body.classList.remove("showChildDiv");
    }
  };

  render() {
    return (
      <div
        style={{
          height: "1000px"
        }}
      />
    );
  }
}
person Tholle    schedule 12.07.2018