Zdarzenie WheelEvent z uwzględnieniem deltaY

Question

Mam elementy ze zdjęciami w sekcji

<section class="service-info-content service-info-content--first">
        <figure class="service-info-el">
          <img src="imgs/code.webp" alt="" class="service-info-img" />
          <figcaption class="service-info-caption">
            Wygeneruj kod szablonu strony
          </figcaption>
        </figure>
        <figure class="service-info-el">
          <img src="imgs/js.webp" alt="" class="service-info-img" />
          <figcaption class="service-info-caption">
            Pobierz skrypty z elementami na stronę
          </figcaption>
        </figure>
        <figure class="service-info-el">
          <img src="imgs/template.webp" alt="" class="service-info-img" />
          <figcaption class="service-info-caption">
            Dodaj własny szablon lub gotowy kod js
          </figcaption>
        </figure>
      </section>

oraz style w arkuszu

.service-info-content {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100vw;
  height: 80vh;
  overflow-y: hidden;
}
.service-info-el {
  position: relative;
  top: 50vh;
  width: 18vw;
}

i kod Js

const serviceInfoElFirstSection = $(".service-info-content--first>.service-info-el");

function slideUp()
{
  serviceInfoEl.animate
  (
    {
      top: "0vh",
    },
    1000
  );
}

WheelEvent.deltaY[2] = slideUp;

Chcę aby elementy o klasie service-info-el podniosły się w górę o 50vh gdy przewinę zawartość strony w dół.

Dałem na próbę wartość 2 dla deltaY, ale konsola wyświetla błąd o niezdefiniowanej właściwości.

Chcę uzupełnić to zdarzenie, gdy przewinę zawartość w dół o 150px

Answer 1

Nie wiem do końca czy o taki efekt Tobie chodzi, ale ustaw zdarzenie na okno "wykrywające" użycie kółka myszki a za pomocą deltaY sprawdź kierunek obrotu, np.

 

[ on-line ]

const serviceInfoElFirstSection = $('.service-info-content--first .service-info-el');

$(window).on('wheel', function(event) {
  if (event.originalEvent.deltaY > 0) {
    serviceInfoElFirstSection.animate({
      top: '0vh',
    }, 1000);
  } else {
    serviceInfoElFirstSection.animate({
      top: '50vh',
    }, 1000);
  }
});

 

lub za pomocą css transition

[ on-line ]

.service-info-el {
  position: relative;
  top: 50vh;
  width: 18vw;
  transition: top 1000ms;
}
.wheel-up {
  top: 0vh;
}

const serviceInfoElFirstSection = $('.service-info-content--first .service-info-el');

$(window).on('wheel', function(event) {
  for (const section of serviceInfoElFirstSection)
    if (event.originalEvent.deltaY > 0)
      section.classList.add('wheel-up');
    else
      section.classList.remove('wheel-up');
});

 

 

Chcę uzupełnić to zdarzenie, gdy przewinę zawartość w dół o 150px

sprawdź 

• window.pageYOffset  [ 1 ]  [ 2 ]
• document.documentElement.scrollTop  [ 1 ]  [ 2 ]

 

 [ on-line ]

const scrollTop = (window.pageYOffset !== undefined) ? 
                  window.pageYOffset : 
                  (document.documentElement || document.body.parentNode || document.body).scrollTop;
console.info(scrollTop);