Safari - IPAD - Bounce deaktivieren (kein Scrollen) ohne -webkit-overflow-scrolling

Zuerst habe ich eine Menge Lösung im Web getestet, aber alle Lösungen funktionieren nie.Safari - IPAD - Bounce deaktivieren (kein Scrollen) ohne -webkit-overflow-scrolling

Ich habe eine Webseite mit einem Iframe und innerhalb dieses, ein div mit overflow:hidden und einem div mit overflow:scroll.

Wenn ich scrolle in die div enthalten in der Iframe, die Bounce alle gebrochen. Der Bounce erscheint nach jeder Scroll und der Inhalt erscheint nach und nach.

Ich möchte Bounce deaktivieren, aber nicht die Rolle. Und ich möchte nicht -webkit-overflow-scrolling verwenden. weil nach der Anwendung -webkit-overflow-scrolling, ist der ganze Überlauf in meiner Seite Überlauf: auto und es ist kein guter Weg für mich.

Ich habe diese Lösung versuchen, aber es ist nicht gut und deaktiviert Scrollen:

var xStart, yStart = 0; 

document.addEventListener('touchstart',function(e) { 
    xStart = e.touches[0].screenX; 
    yStart = e.touches[0].screenY; 
}); 

document.addEventListener('touchmove',function(e) { 
    var xMovement = Math.abs(e.touches[0].screenX - xStart); 
    var yMovement = Math.abs(e.touches[0].screenY - yStart); 
    if((yMovement * 3) > xMovement) { 
     e.preventDefault(); 
    } 
});

Sie exaclty sehen können, was ich sage, bitte meine Seite sehen: http://cipa.ch/forStack/

<html> 
 
\t <head> 
 
\t \t <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
 
\t \t <meta name="viewport" content="width=640"> 
 
\t </head> 
 
\t <body style="margin:0;padding:0;"> 
 
\t \t <iframe frameborder="0" height="100%" width="100%" style="margin:0;padding:0;width:100%;height:90%;position:absolute" src="http://cipa.ch/forStack/test.html" > 
 
\t \t </iframe> 
 
\t </body> 
 
</html>

Quelle

2016-04-07 P. Frank

Möchten Sie den Bounce-Effekt deaktivieren, der standardmäßig in Safari aktiviert ist? –

ja, wenn es möglich ist –

siehe meine Antwort, lösen Sie dieses Problem nur wenige Tage vor –

versuchen Sie es mit position:fixed am Body-Tag

body { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
}

Quelle

2016-04-07 10:57:26

Ok jetzt mit Ihrer Lösung die Seite einen Fehler haben. Bitte versuchen Sie, oft unten zu scrollen (dasselbe gilt für die Aktualisierung der Seite in der iphone App) und Sie sehen, dass der Inhalt der Seite in der Größe verändert wird. Warum? und wie man diesen Fehler beheben kann. danke –

kann Link wieder mit Fixposition Körper teilen? –

http://cipa.ch/forStack/ –

Safari - IPAD - Bounce deaktivieren (kein Scrollen) ohne -webkit-overflow-scrolling

Antwort

Verwandte Themen