Zdarzenie onscroll w przeglądarce Safari w obrębie elementu zagnieżdżonego

Ostatecznym celem jest wstawienie wstawionej wartości div na mojej stronie, która poziomo przewija się natywnie (przy użyciu -webkit-overflow-scrolling: touch), która również jest przyciągana.Zdarzenie onscroll w przeglądarce Safari w obrębie elementu zagnieżdżonego

można to osiągnąć bez-webkit-overflow-scrolling bo mam dostęp do wydarzenia ontouchend, więc mogę obliczyć mój przystawki kiedy tak się dzieje, jednak aby osiągnąć najlepszy możliwy UX dla tej funkcji, chcę użyć natywnej jak przewijanie tego elementu.

Problem z użyciem -webkit-przelewowy zwijający się, że korzystanie z ruchem/pewną siłę, div będzie nadal przewijać na trochę po przyjęciu palec (to znaczy po ontouchend został zwolniony); co oznacza, że mój snap oblicza się przed zakończeniem przewijania.

Spędziwszy długi czas próbując znaleźć drogę, nie osiągnąłem jeszcze sukcesu.

W całym kontekście strony, safari wywołuje zdarzenie onscroll, gdy zwój jest zakończony . Moje pytanie brzmi, czy jest możliwe, aby to zdarzenie zostało wywołane ogniem w kontekście elementu? to znaczy, że włączyli ogień wewnątrz <div id="slideShow">?

Jeśli nie jest to możliwe albo

(a) prędkość dostępu do ontouchmove na przykład, żebym mógł obliczyć, kiedy uruchomić przystawkę?

lub

(B) emuluje -webkit przepełnienia przewijania: touch (elastyczność i efekty prędkości).

UWAGA: Na przykład przy użyciu tabletu iPad w/iOS5.

Źródło

2012-01-20 sgb

Zdarzenie scroll zostaje wywołane przy każdym przewijanym pojemniku osobno, a także w systemie iOS po zakończeniu przewijania i ukończeniu. Możesz po prostu posłuchać zdarzenia przewijania w swoim kontenerze.

Oto przykład:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Test Touch Scrolling</title> 
     <style> 
      body { 
       font-size: 15em; 
      } 
      #outer { 
       height: 1200px; 
       width: 300px; 
       overflow-x: scroll; 
       -webkit-overflow-scrolling: touch; 
      } 
      #inner { 
       width: 600px; 
      } 
     </style> 
     <script> 
      document.addEventListener("DOMContentLoaded", function() { 
       var list = document.getElementById("outer"); 
       list.addEventListener("scroll", function(event) { 
        alert("Scroll has ended for element with ID '" + event.currentTarget.id + "'"); 
       });    
      }, false); 
     </script> 
    </head> 
    <body> 
     <div id="outer"> 
      <div id="inner">Some text. And more.</div> 
     </div> 
    </body> 
</html>

Zobaczysz tylko powiadomienie, gdy masz przewijany tekst poziomo, a nie wtedy, gdy div out został przewinięty.

Źródło

2012-01-22 14:57:05

Excellent; ale czy wiesz, dlaczego wydarzenie może wystrzelić dużo czasu podczas przewijania? Twój przykład działa, ale w mojej bardziej skomplikowanej implementacji (bardziej złożony język znaczników, css), zdarzenie jest wywoływane, a jednocześnie przewijane. – sgb

Aktualizacja: Miałem kilka zdarzeń związanych z dotykiem, które powodowały wielokrotne przewijanie. Moja wina, dziękuję za pomoc. – sgb

Zdarzenie onscroll w przeglądarce Safari w obrębie elementu zagnieżdżonego

Odpowiedz

Powiązane problemy