iOS dotyka współrzędnych X/Y rzutni urządzenia za pośrednictwem Javascriptu

Obecnie tworzę stronę internetową dla iPhone'a, która zawiera element DIV, który użytkownik może dotknąć i przeciągnąć. Ponadto, gdy użytkownik przeciąga element na górę lub dół ekranu urządzenia, chcę automatycznie przewinąć stronę w górę lub w dół.iOS dotyka współrzędnych X/Y rzutni urządzenia za pośrednictwem Javascriptu

Problem polegający na tym, że próbuję ustalić niezawodną formułę, aby uzyskać współrzędne w zdarzeniu onTouchMove, które współgra z palcem użytkownika docierającym do górnej lub dolnej części rzutni urządzenia. Moja obecna formuła wydaje się nużąca i uważam, że może być łatwiejszy sposób na zrobienie tego.

Moja obecna formuła aby ustalić, czy zdarzenie dotykowy osiągnął dno ekranu:

function onTouchMoveHandler(e) 
{ 
    var orientation=parent.window.orientation; 
    var landscape=(orientation==0 || orientation==180)?true:false; 
    var touchoffsety=(!landscape?screen.height - (screen.height - screen.availHeight):screen.width - (screen.width - screen.availWidth)) - e.touches[0].screenY + (window.pageYOffset * .8); 
    if(touchoffsety < 40) alert('finger is heading off the bottom of the screen'); 
}

Zrobiłem trochę Javascript refleksji na obiektach takich jak okna dokumentu, ciała, e.touches aby sprawdzić, czy mogę znaleźć zestaw liczb, które zawsze będą równe górze lub u dołu ekranu, ale bez niezawodnego sukcesu. Pomoc w tym będzie bardzo ceniona.

Źródło

2012-12-20 Brain2000

Oto link z dogłębnym wyjaśnieniem różnych platform mobilnych i zmiennych JavaScript opisujących wymiary rzutni i ich różnicę. Pomogło mi to znaleźć odpowiedź: http://tripleodeon.com/2011/12/first-understand-your-screen/ – Brain2000

Zakładając, że pole dotykowe danego screenY utrzymuje współrzędną y względem ekranu, niezależnie od aktualnej pozycji przewijania, twoje obecne obliczenia nie mają dla mnie większego sensu. Mam nadzieję, że źle zrozumiałem, co próbujesz zrobić.

Aby dowiedzieć się, czy dotyk znajduje się blisko górnej lub dolnej części urządzenia, najpierw sprawdziłbym, czy screenY jest blisko do góry (góra to 0), ponieważ możesz bezpośrednio pracować z tą wartością. Następnie, jeśli nie jest blisko, obliczyć odległość od dna i sprawdzić.

var touch = e.touches[0]; 
if (touch.screenY < 50) 
{ 
    alert("Closing in on Top"); 
} 
else //Only do bottom calculations if needed 
{ 
    var orientation=parent.window.orientation; 
    var landscape=(orientation==0 || orientation==180)?true:false; 
    //height - (height - availHeight) is the same as just using availHeight, so just get the screen height like this 
    var screenHeight = !landscape ? screen.availHeight : screen.availWidth; 
    var bottomOffset = screenHeight - touch.screenY; //Get the distance of the touch from the bottom 
    if (bottomOffset < 50) 
     alert("Closing in on Bottom"); 
}

Źródło

2012-12-28 13:21:31 Wutz

To jeden z problemów, z którymi się zetknąłem. Można by pomyśleć, że screenY to wszystko, czego potrzebujesz, ale tak nie jest. Jednym z powodów jest to, że jeśli masz dwa elementy iFrames i przeciągasz DIV w dolny element iFrame, liczby wydają się przekrzywiać w zależności od tego, jak daleko obecnie jesteś przewijany. W tym miejscu pojawia się okno.pageYOffset, które informuje, jak daleko przewija się okno przeglądarki. Ale w zależności od tego, gdzie jest przewijany, wydaje się, że ponad lub pod wyrównuje odpowiednią kwotę. Właśnie dlatego zmyliłem go pomnożąc przez .8, ale wciąż jest wybredny. – Brain2000

Czy próbowałeś klienta? Może to również ci pomoże: http://stackoverflow.com/questions/5885808/includes-touch-events-clientx-y-scrolling- lub - – Wutz

Tak, próbowałem wszystkich trzech, clientY, screenY i touchY. – Brain2000

To naprawdę nie jest złe. Można również użyć Zepto.js i wbudowanym zdarzeń dotykowych i .offset() sposobu, aby ją trochę łatwiej:

Jednak jestem zainteresowany, aby wiedzieć, czy czy nie udaje ci się go przewinąć w dół i jeśli wydajność jest wystarczająco gładka, aby efekt był opłacalny. (często przewijanie w przerwaniach na iOS JavaScript jest naprawdę trudne)

Źródło

2013-01-03 00:46:15 hunterloftis

Mam to działa całkiem dobrze na iPadzie 1 przy użyciu window.outerHeight - touch.screenY <40. Używam setTimeout w czasie 20 milisekund przewijania, ustawiając parametr .scrollTop zwiększany o 20 pikseli za każdym razem. Przenoszę również element div, który trzyma palec na tej samej wysokości, więc wydaje się, że nie porusza się, gdy tło się przewija. Wydajność jest całkiem gładka. – Brain2000

iOS dotyka współrzędnych X/Y rzutni urządzenia za pośrednictwem Javascriptu

Odpowiedz

Powiązane problemy