iScroll mit native scrollen auf einer Achse

Ich bin mit dem schönsten javascript-tool iScroll4 http://cubiq.org/iscroll-4 auf eine mobile website für iOS und Android. Hier ist, was mein layout sieht wie folgt aus:

Den horizontal-scroll-in der Lage Gegend ist die Nutzung von iScroll4 mit den folgenden Einstellungen:

   var myScroll = new iScroll('frame',  { hScrollbar: false, vScrollbar: false, vScroll: false })

Die horizontale Scroll-Teil funktioniert Super. Diese Frage ist, was passiert, wenn ein Benutzer versucht, um nach oben oder unten auf der Seite platzieren Ihren finger auf die horizontale Scroll-Bereich. So brauche ich die native vertikale Bildläufe und das iScroll horizontalen scrollen auf der gleichen Fläche.

Was ich bisher versucht habe:
Entfernen von e aus.preventDefault() in der iScroll-code (ermöglicht die native scrollen, aber in BEIDEN Achsen).
Entfernen von e aus.preventDefault() und dann deaktivieren von horizontal-scrolling-Seite Breite:

var touchMove;

document.ontouchstart = function(e){
    touchMove = e.touches[0];
}

document.ontouchmove = function(e){
    var theTouch = e.touches[0] || e.changedTouches[0];
    var Xer      = rs(touchMove.pageX - theTouch.pageX).toPos();
    var Yer      = rs(touchMove.pageY - theTouch.pageY).toPos();        
    touchMove    = theTouch;
    if(Yer > Xer){ e.preventDefault(); }
}

scheint das nichts zu tun. Wie kann ich ermöglichen, für die native vertikale scrollen in die horizontale Scroll-Bereich, ohne dabei das horizontale scrollen von iScroll? Ich bin echt ratlos hier. Vielen Dank im Voraus.

(just for the record rs(foo).toPos() ist eine Funktion, foo eine positive Zahl, unabhängig von Ihrem Wert).

InformationsquelleAutor der Frage Fresheyeball | 2011-10-17

12

Wenn Sie möchten, um den Effekt zu erzielen, beschrieben durch Fresheyeball ohne hacking den Kern, und ohne änderung von iScroll, swipeview, dann iScroll 4 bietet Ihnen die zugehörigen Ereignis-Listener, mit zu arbeiten.
```
myScroll = new iScroll('scrollpanel', {
    //other options go here...
    vScroll: false,
    onBeforeScrollMove: function ( e ) {
        if ( this.absDistX > (this.absDistY + 5 ) ) {
            //user is scrolling the x axis, so prevent the browsers' native scrolling
            e.preventDefault();
        } else {
            //delegate the scrolling to window object
        window.scrollBy( 0, -this.distY );
    }
    },
});
```
Damit die onBeforeScrollMove-Handler prüft, ob die scroll-Richtung zu sein scheint, horizontal, und dann verhindert, dass der Standard-handler, die so effektiv sperren Sie die scroll-Aktion, um die X-Achse (versuchen Sie, kommentieren Sie es aus, Sie werden den Unterschied sehen). Andernfalls, wenn die scroll-Richtung muss die vertikale, machen wir den browser scrollen über die window.scrollBy() Methode. Dies ist nicht exakt der nativen, sondern macht den job gut.

Hoffe, das hilft

Lukx

[BEARBEITEN]
Meine ursprüngliche Lösung, die nicht window.scrollBy() hat das nicht funktioniert auf älteren Samsung-Handys, das ist der Grund, warum ich brauchte, um die Anpassung der Antwort.

InformationsquelleAutor der Antwort Lukx

Schlug edit @Lukx hervorragende Lösung. Neue Versionen von iScroll4 Ort der e.preventDefault() im onBeforeScrollMove der überschrieben werden kann. Durch die Platzierung der if-block in diese option ist standardmäßig nicht verhindert, für vertikales scrollen, vertikales scrollen nativ.

myScroll = new iScroll('scrollpanel', {
    //other options go here...
    vScroll: false,
    onBeforeScrollStart: function ( e ) {
        if ( this.absDistX > (this.absDistY + 5 ) ) {
            //user is scrolling the x axis, so prevent the browsers' native scrolling
            e.preventDefault();
        }
    },
});

InformationsquelleAutor der Antwort Fresheyeball

4

Mit iscroll 5, können Sie eventPassthrough: true um dies zu erreichen. Sehen http://iscrolljs.com/#configuring

InformationsquelleAutor der Antwort Greg
1

ALTE ANTWORT

UPDATE eine spezielle das Stopfen ist geschrieben worden, nur um dieses problem zu beheben:
http://cubiq.org/swipeview

Habe ich einen Weg gefunden!

fügen Sie eine variable an der Spitze des Dokuments: bei android ist 15 und ist mit iOS 3
```
 var scrollTolerance = ( rs().isDevice('android') )?15:3;
```
deaktivieren Sie die ursprüngliche e.preventDefault(); zum scrollen. Dies ist unter onBeforeScrollStart:

die in _move nur unter
```
 timestamp = e.timeStamp || Date.now();
```
fügen Sie diese Zeile
```
if( Math.sqrt(deltaX*deltaX) > scrollTolerance){e.preventDefault();}
```
Was dieser tut, ist die folgende:
die scrollTolerance setzt, Sie Ahnen es, eine Toleranz für die finger die Richtung. Wir wollen nicht verlangen, eine perfekte vertikale Winkel zu den up-down-native scrollen. Auch iOS nicht richtig erkennen und wird nie höher als 4 für einige Grund, so habe ich 3. Dann deaktivieren wir iScroll standard-e.preventDefault(); verhindert, dass die native vertikale scrollen auf unsere bi-scrollbaren Bereichs. Dann setzen wir e.preventDefault(); nur beim bewegen und basiert auf den finger Richtung von Toleranz.

Funktioniert das nicht perfekt. Aber ist akzeptabel und funktioniert auf iOS und Android. Wenn jemand sieht bessere Möglichkeiten, bitte hier posten. Dies ist etwas, was ich (und davon ausgehen, andere) müssen regelmäßig nutzen, und wir sollten haben eine perfekte rock-solid-Lösung.

Dank.

InformationsquelleAutor der Antwort Fresheyeball
0

Bitte testen Sie diese Lösung aus Adam.
https://gist.github.com/hotmeteor/2231984

Ich denke, der trick ist, fügen Sie die check-in onBeforeScrollMove. Bringen Sie zunächst den ersten touch-position in onBeforeScrollTouchStart und dann in onBeforeScrollMove überprüfen Sie die neue position und dann deaktivieren Sie die gewünschten Blättern, basierend auf der Differenz.

InformationsquelleAutor der Antwort agaase
0

iScroll 5 unterstützt native scrollen von beliebigen Achse!

http://iscrolljs.com/

InformationsquelleAutor der Antwort Design by Adrian
0

auf iScroll5 setzen Sie einfach eventPassthrougt zu wahren. Das behebt es.

InformationsquelleAutor der Antwort musdy

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.