TLDR; Alles funktioniert einwandfrei, es sei denn, ich versuche, die Seite mit meinem Berührungsanfang innerhalb eines horizontal scrollenden Bereichs nach unten zu scrollen, da die Seite den elastischen Scrolleffekt hat, während sie nicht unten oder oben ist. Das Entfernen von jQuery Mobile behebt dieses Problem. Dies geschieht nur unter iOS, Android ist in Ordnung.TLDR;

Ich habe ein Problem mit jQuery Mobile und dem Scrollen.

Ich habe eine Seite, die größer ist als mein Bildschirm (auf dem iPhone 5s). Diese Seite enthält 2 horizontal scrollende Bereiche mit Bildern.

Die scrollenden Divs sind wie folgt

HTML:

<div class="list">
    <input type="radio" name="cover" value="26" id="Cover26" data-role="none" class="offScreen">
    <label for="Cover26">
        <span class="check"></span>
        <img src="http://placehold.it/110x170" class="background">
    </label>
</div>

CSS:

.list{width:auto;height:190px;overflow:hidden;overflow-x:auto;overflow-y:visible;white-space:nowrap;-webkit-overflow-scrolling:touch;}
    .list label{width:110px;height:170px;margin:0 8px 5px;padding:0;position:relative;overflow:hidden;vertical-align:top;display:inline-block;}
    .list input{position:absolute;top:-999px;left:-999px;}

Dieses Scrollen funktioniert horizontal einwandfrei, aber wenn ich es berühreInnerhalb Wenn Sie eine dieser Optionen auswählen und auf dem Bildschirm nach oben ziehen, um die Seite nach unten zu rollen, hat die Seite den elastischen Bildlaufeffekt (siehe Bilder). Scrollen auf der Seite funktioniert und finde heraus, ob meine Berührung außerhalb des horizontalen Bereichs beginnt.

Erste Ansicht der Seite

Elastisches Scrollen, wenn die Seite nicht ganz unten ist

Am eigentlichen Ende der Seite

Elastisches Scrollen, wenn die Seite nicht oben ist

Scrollen auf und ab der Seite ist nur möglich, wenn die Berührung außerhalb des horizontal scrollenden Bereichs beginnt. Wenn ich jQuery Mobile entferne, tritt dieses Problem nicht mehr auf. Ich glaube, es hat etwas mit den vmouse-Ereignissen von jQuery Mobile zu tun. Aber ich war nicht in der Lage, mit Sicherheit zu sagen, und ich bin nicht sicher, ob ich diese Ereignishandler entfernen kann und die Seite immer noch mit jQuery Mobile funktioniert.

So weit ich das beurteilen kann, geschieht dies nur unter IOS. Ich habe es versucht und Android Phone und alles funktioniert wie erwartet.

Ich bin schon eine Weile dabei und kann nicht herausfinden, was ich noch tun kann, um das Problem zu beheben. Irgendwelche Ideen sind hilfreich. Danke fürs schauen!

Für alle, die eine Demo hier haben möchten, gibt es einige, die ich hoste. Ich hätte sie auf jsfiddle gesetzt, aber jsfiddle unterstützt nicht das Festlegen des Ansichtsfensters, damit die mobile Seite richtig gerendert wird.

Seite mit jQuery Mobile welchenicht ArbeitSelbe Seiteohne jQuery Mobile welchetut Arbeit