iScroll lässt keine Objekte klicken

Brauchen Sie nur, um diese änderungen in den loader des iscroll:

Ändern Sie diese Zeile:

myScroll = new iScroll('wrapper');

:

myScroll = new iScroll('wrapper', {
useTransform: true,
zoom: false,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;

if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
}
});

InformationsquelleAutor der Antwort yenssen

Einer Arbeit um, die ich verwendet habe, ist "einfrieren" der iscroll, wenn ich will, dass die Benutzer in der Lage sein, um Sie zu Bearbeiten. Die Inkompatibilität, die iScroll hat mit Eingängen verbunden ist, so weit ich erzählen kann, um die css-Transformationen in Kombination mit der touch-Unterstützung gilt es, den Inhalt in die scroller. Wenn Sie vorübergehend deaktivieren Sie die scroller, können Sie den Benutzer zur Eingabe von Werten. Der trick ist, um sicherzustellen, dass die aktuelle scroll-Position der Inhalt bewahrt wird, auf deaktivieren. Wenn "frozen" ein Benutzer kann Aktualisierung der Eingänge im sichtbaren Bereich. Der Nachteil ist, dass der scroller nicht scrollen während diesem Zustand. Sie haben zu tauen es auf irgendein Ereignis.

Fügte ich diese Funktionen auf der iScroll.Prototyp um diese Arbeit zu machen:

_get_current_scroll_px: function (transformStyle) {
    //return the first string that looks like an integer, that should be the x translation
    return /[\-0-9]+px/.exec(transformStyle)[0];
},


freeze: function () {
    this.disable();
    this.savedStyle = this.scroller.style[vendor + 'Transform'];
    this.scroller.style['marginLeft'] = this._get_current_scroll_px(this.savedStyle); //use margin left instead of transform to position scroller
    this.scroller.style[vendor + 'Transform'] = '';
},

thaw: function () {
    this.scroller.style[vendor + 'Transform'] = this.savedStyle;
    this.scroller.style['marginLeft'] = '0';
    this.enable();
}

Aufrufen oder einfrieren, es würde wie folgt Aussehen:

//user triggered event causes freeze
yourFreezeEventCallback: function () { 
    myScroll1.freeze();
    //now user can use visible inputs on screen
}

Auftauen es würde wie folgt Aussehen:

//user triggered event causes thaw
yourThawEventCallback: function () { 
    myScroll1.thaw();
    //now scrolling is back and inputs can no longer be edited or in focus
}

Natürlich müssen Sie integrieren diese in Ihr eigenes Projekt irgendwie, aber es hat für mich gearbeitet. Es ist nicht ideal, so freue ich mich auf die iScroll update. Warnung: dies ist nicht getestet im IE, damit ich nicht bürgen für Sie da. Ich hoffe, dies ist zumindest ein Anfang, um Ihnen helfen, einen work around.

InformationsquelleAutor der Antwort Ben L

Ich habe auch daran gearbeitet, die Dinge scrollen reibungslos in das mobile Umfeld und iscroll war eine der Bibliotheken, die ich als in meiner Suche nach dem richtigen Werkzeug. Andere Antworten vorgeschlagen haben, wie Sie Sie beheben können, die Ihre spezifischen problem, aber ich würde eigentlich empfehlen die Verwendung von entweder Scroll-Fähigkeit (von Joe Hewitt) oder touchscroll (von David Aurelio). Ich denke, dass die Scroll-Fähigkeit tatsächlich bietet die beste Atmosphäre, aber es ist nicht wirklich getan, und Sie würden am Ende vor den gleichen oder ähnlichen Themen. Ich persönlich bin mit touchscroll für ein Projekt von mir und ich empfehle es.

Ich in benutzerdefinierten Klick-Aktionen und timeout prüfen, wenn ich war das Experimentieren mit iscroll vor ein paar Wochen in meinem Projekt und ich Tat dies durch das auskommentieren der e.preventDefault() auf den Anfang der Note und einfügen von einigen meiner eigenen Funktionen zu fangen, wenn es tatsächlich scrollt. In Ihrem Kern sind diese Bibliotheken, die alle auf die gleiche Weise arbeiten (abfangen von Ereignissen und verhindern, dass Sie, läuft css-Transformationen, um glatter als DOM-Neuzeichnen Animationen, dann künstlich feuern alle events, die gefeuert werden sollte). Dies bedeutet, dass die anderen Weg, Sie können es zu beheben ist zu finden, wenn die Veranstaltung von der klicken Sie auf für Ihre spezifische Elemente passieren sollte und Feuer es manuell in den code. In touchscroll hört es für Veranstaltungen auf dem obersten element, so können Sie überschreiben Verhalten, indem Sie einfach stoppen sprudelt... ich kann mich nicht erinnern, ob iscroll macht das gleiche.

Diese (glatt, native Gefühl, animation im Handy) ist immer noch ein Gebiet, das am Rande der verschiedenen Technologien, so dass niemand die komplette Lösung noch nicht. Ich würde erwarten, dass in wenigen Jahren mobile verbessern, so dass der mobile Browser nur handle scroll-Ereignisse nativ sowieso, aber bis dahin sind wir gezwungen, die hacken zusammen Lösungen, wie diese. Viel Glück!

InformationsquelleAutor der Antwort hackartist

Kommentar aus

position:absolute;

in #pageWrapper im styles.css

In meinem Fall, diese lösen die oben unklickbaren Problem.

InformationsquelleAutor der Antwort icarus2n