Colorbox Inhalt nicht auf mobilen Safari Scrollen

Question

Guten Abend,
Ich erstellte eine Website mit der Thickbox, wo es einen Kalender anzeigt und eines der Probleme, die aufgetaucht ist, ist der Inhalt wird nicht auf iPhone-Browsern scrollen. Ich habe versucht, es auf die Colorbox zu aktualisieren und zu sehen, ob das das Problem behob und es nicht tat.

Wie bekomme ich den mobilen Browser, damit Inhalte scrollen können?

Hier ist eine Seite, die ich verwendet haben, das Problem zu versuchen, herauszufinden: http://hsr-bsa.org/test/test.php

Danke,
Mike

Answer 1

Dies scheint eine Einschränkung der mobilen Version von Webkit zu sein.

This page Ansprüche können Sie umgehen es durch zwei Finger Scrollen innerhalb von Regionen mit Überlauf: Scroll-Set. Ich konnte das jedoch nicht selbst ausprobieren, da ich es nicht geschafft habe, das Unternehmen ipad zu finden, um es zu testen.

Answer 2

Wenn jemand auf diese Antwort Frage passiert, finden Sie unter my answer zu dieser Frage in einem anderen Thread. Beachten Sie, dass Sie den Iframe-Inhalt, d. H. In derselben Domäne, steuern müssen.

Answer 3

Mit Dank an Jack Moore hat die colorbox CSS-Datei aktualisiert diese Adresse:

#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;} 

Ihren Stylesheet mit dem Webkit spezifischen Überlauf Regel Änderung sollte es tun. Keine Notwendigkeit, Javascript Funktion zu aktualisieren.

Quelle: https://github.com/jackmoore/colorbox/commit/ca4e63c71cf1ec00fb3340f2e1a0a5512cbc8f0a

Answer 4

Diese Arbeit gut für mich

<script> 
    var devicetype = '<?php echo $devicetype; ?>';// get ur divice type variable 
    if(devicetype == 'mobile'){ 
     setTimeout(function() { 
      var startY = 0; 
      var startX = 0; 
      var b = document.body; 
      b.addEventListener('touchstart', function (event) { 
       startY = event.targetTouches[0].screenY; 
       startX = event.targetTouches[0].screenX; 
      }); 
      b.addEventListener('touchmove', function (event) { 
       event.preventDefault(); 
       var posy = event.targetTouches[0].screenY; 
       var h = parent.document.getElementById("cboxLoadedContent"); 
       var sty = h.scrollTop; 

       var posx = event.targetTouches[0].screenX; 
       var stx = h.scrollLeft; 
       h.scrollTop = sty - (posy - startY); 
       h.scrollLeft = stx - (posx - startX); 
       startY = posy; 
       startX = posx; 
      }); 
     }, 1000); 
    } 
    </script>