@Suma1821

Cобытие 'wheel' не корректно работает в firefox, почему?

Привет Дурзья! Суть, у меня есть слайдер, который должен прокручиваться скроллом, я повесил на это все дело событие wheel, в хроме и сафари все работает отлично, но firefox, после второго ил рузкого скролла залипает, потому что, this.scrollTop успевает прокрутиться, выглядит так, будто браузер не до конца обрабатывет event.preventDefault()
scrollWrapper();
function scrollWrapper() {
  const wrapper = document.querySelector('.wrapper');
  const sections = document.querySelectorAll('.section');

  sections[0].setAttribute('second-slide',0);
  sections[1].setAttribute('second-slide', wrapper.offsetHeight);
  sections[2].setAttribute('second-slide', wrapper.offsetHeight * 2);
  //function for mouse scroll

  wrapper.addEventListener('wheel', function(event){

    if (this.scrollTop === +sections[0].getAttribute('second-slide')) {
      if (event.deltaY > 0) {
        this.scrollTo({
        top: sections[1].getAttribute('second-slide'),
        behavior: "smooth"
      });
    }
  }

   if (this.scrollTop === +sections[1].getAttribute('second-slide')) {
    if (event.deltaY > 0) {
      this.scrollTo({
      top: sections[2].getAttribute('second-slide'),
      behavior: "smooth"
      });
    } 
    else {
          this.scrollTo({
          top: sections[0].getAttribute('second-slide'),
          behavior: "smooth"
          });
        }
      }

      if (this.scrollTop === +sections[2].getAttribute('second-slide')) {
        if (event.deltaY < 0) {
          this.scrollTo({
          top: sections[1].getAttribute('second-slide'),
          behavior: "smooth"
        });
      }
    }
    event.preventDefault();
  });
  }

Буду рад любой помощи о толковании почему так. Спасибо!
  • Вопрос задан
  • 196 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Suma1821 Автор вопроса
DONE! Все как вседа было намного проще, проблема была в строгом сравнениии, в моззиле событие срабатовало несколько раз и браузер не успевал обработать. Поменял строгое сравнение на больше, менше. Вот решение:

function scroll (event){
    event.preventDefault();

    //down to second slide
    if (this.scrollTop >= +sections[0].getAttribute('second-slide') ) {
      if (event.deltaY > 0 ) {
        this.scrollTo({
        top: +sections[1].getAttribute('second-slide'),
      });
    }
  }

    //down to third slide
    if (this.scrollTop >= +sections[1].getAttribute('second-slide')) {
      if (event.deltaY > 0) {
        this.scrollTo({
        top: +sections[2].getAttribute('second-slide'),
      });
    } 
  }

    //up to first slide
    if (this.scrollTop <= +sections[2].getAttribute('second-slide')) {
      if (event.deltaY < 0) {
        this.scrollTo({
        top: +sections[1].getAttribute('second-slide'),
      });
    }
  }

    //up to second slide
    if (this.scrollTop <= +sections[1].getAttribute('second-slide')) {
      if (event.deltaY < 0) {
        this.scrollTo({
        top: +sections[0].getAttribute('second-slide'),
      });
    }
  }
};
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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