Cобытие 'wheel' не корректно работает в firefox

Question

Дурзья! Обращаюсь вновь к вам за помощью. Суть, у меня есть слайдер, который должен прокручиваться скроллом, я повесил на это все дело событие wheel, в хроме и сафари все работает отлично, но firefox, после второго скролла залипает, или ксли сделать резко два скролла, то скрипт вообще останавливается, не могу понять в чем дело, помогите. Буду рад любой помощи о толковании почему так. Спасибо!

scrollWrapper();
function scrollWrapper() {
  const wrapper = document.querySelector('.wrapper');
  const dots = document.querySelectorAll('.dot');
  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();
  });
  }

*, ::after, ::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper_outer {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  width: 80vw;
  height: 560px;
  overflow: scroll;
  overflow-x: hidden;
  position: relative;
  /*scroll-behavior: smooth;*/
}

.wrapper::-webkit-scrollbar { 
  width: 0px;  
}

.wrapper {
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}

.section {
  height: 100%;
  background-color: #f7f8f9;
  position: relative;
}
/*==================/common====================*/

.section:nth-child(1){
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.section:nth-child(1) p {
  max-width: 200px;
  margin-left: 10px;
  margin-right: 10px;
}


.section:nth-child(2) {
  background-image: url(https://miro.medium.com/max/2804/1*C3ecgN9uR0uNjl29xF-AuQ.pnghttps://miro.medium.com/max/2804/1*C3ecgN9uR0uNjl29xF-AuQ.png);
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.section:nth-child(3)  {
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 10px;
}

.carousel{
  display: flex;
  position: relative;
  overflow: hidden;
  transition: all .45s;
}

.carouselWrapper img{
  width: 350px;
  height: 250px;
  padding-left: 10px;
}

.carouselWrapper {
  overflow: hidden;
}

.btn_wrapper {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  font-size: 32px;
  color: #3d3d3d;
}

.btn_wrapper i {
  cursor: pointer;
}


.first_slide {
  display: flex;
}

.stopBottom {
  position: absolute;
  width: 100%;
  height: 100px;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
  bottom: -80px;
  transition: all .95s;
}

.bar {
  color: #aaa69d;
  transition: all .45s;
}

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">

<div class="wrapper_outer">

  <div class="bar">
    <div class="dot active"><i class="far fa-dot-circle"></i></div>
    <div class="dot"><i class="far fa-dot-circle"></i></div>
    <div class="dot"><i class="far fa-dot-circle"></i></div>
  </div>
  <div class="wrapper">

    <div class="section">
    <div class="stop"></div>

      <div class="first_slide">
        <div class="text">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, voluptate?</p>
        </div>
        <img class='first_section_img' src="https://via.placeholder.com/250x150" alt="">
        <div class="more-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi fugiat iusto esse laborum, praesentium illum nihil. Fugiat, placeat consectetur enim facere.</p>
        </div>
    </div>
  </div>
    <div class="section">
        <!-- <img src="img/section2.jpg" alt="" id="section2Img"> -->
    </div>

    <div class="section">
    <div class="carouselWrapper" id="carouselWrapper">

      <div class="carousel" id="carousel">
        <div class="item">
            <img src="https://miro.medium.com/max/2804/1*C3ecgN9uR0uNjl29xF-AuQ.pnghttps://miro.medium.com/max/2804/1*C3ecgN9uR0uNjl29xF-AuQ.png" alt="">
        </div>
        <div class="item">
            <img src="https://miro.medium.com/max/2804/1*C3ecgN9uR0uNjl29xF-AuQ.pnghttps://miro.medium.com/max/2804/1*C3ecgN9uR0uNjl29xF-AuQ.png" alt="">
        </div>
        <div class="item">
            <img src="https://miro.medium.com/max/2804/1*C3ecgN9uR0uNjl29xF-AuQ.png" alt="">
        </div>
        <div class="item">
            <img src="https://miro.medium.com/max/2804/1*C3ecgN9uR0uNjl29xF-AuQ.png" alt="">
        </div>
        <div class="item">
            <img src="https://miro.medium.com/max/2804/1*C3ecgN9uR0uNjl29xF-AuQ.png" alt="">
        </div>
        <div class="item">
            <img src="https://miro.medium.com/max/2804/1*C3ecgN9uR0uNjl29xF-AuQ.png" alt="">
        </div>
        <div class="item">
            <img src="https://miro.medium.com/max/2804/1*C3ecgN9uR0uNjl29xF-AuQ.png" alt="">
        </div>
      </div>
    </div>
    
    <div class="btn_wrapper">
      <i id="left" class="fas fa-arrow-left"></i>
      <i id="right" class="fas fa-arrow-right"></i>
    </div>
    
  <div class="stopBottom"></div>
  </div>

  </div>
</div>

Понял что, this.scrollTop успевает прокрутиться, выглядит так, будто браузер не до конца обрабатывет event.preventDefault()

Answer 1

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'),
      });
    }
  }
};

БЛОГ НА HUSL

Cобытие 'wheel' не корректно работает в firefox

Ответы (1 шт):