coolswood
@coolswood
https://coolswood.github.io

Как сделать исчезающую/появляющуюся стрелочку «вверх» на React?

Неожиданно для себя столкнулся с такой проблемой. Как на React сделать банальную вещь - при достижении определенного отступа от верха страницы появляется стрелочка "вверх". То есть понятно что можно по условию обновлять state, но как можно реализовать без постоянного перерендеривания dom?
  • Вопрос задан
  • 326 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
class ArrowUp extends Component {
  state = {
    isVisible: false,
  };

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

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

  handleScroll = () => {
    if (window.scrollY >= SOME_VALUE  && !this.state.isVisible) {
      this.setState({ isVisible: true });
    } else if (window.scrollY < SOME_VALUE && this.state.isVisible) {
      this.setState({ isVisible: false });
    }
  };

  render() { /* ... */ }
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы