iOS Safari scrollt nicht, um in iframe zu verankern

Ich habe eine HTML Seite mit einer iframe deren Inhalt ich nach dem Laden zu einer bestimmten Stelle scrollen muss. Mein Beispiel funktioniert in den meisten Browsern außer iOS Safari - das ist das, was ich wirklich brauche. Es funktioniert normalerweise in iOS Safari beim ersten Laden der Seite, aber im Allgemeinen werden alle Aktualisierungen danach den Inhalt von iframe nach oben scrollen.iOS Safari scrollt nicht, um in iframe zu verankern

Ich habe über Probleme gelesen, wo Redirects die #anchorname fallen lassen, aber das ist nicht, was in diesem Fall passiert.

Der echte iframe Inhalt und die Hauptseite sind auf verschiedenen Domänen. Ich kann den Inhalt der iframe beeinflussen, aber ich habe keine Kontrolle darüber. Es wird auch für andere Zwecke verwendet, so dass ich nur eingeschränkt in der Lage wäre, irgendetwas Brauchbares zu tun, das das stören könnte.

Live-Link hier: https://s3.amazonaws.com/ios-iframe-test/iframe_test.html

Hier ist die Mutter Inhalt:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>test</title> 
    <meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" name="viewport"> 

    <style type="text/css"> 

     #root { 
     position: relative; 
     } 

     #wrapper { 
     height: 300px; 
     width: 300px; 
     overflow-x: hidden; 
     overflow-y: scroll; 
     position: relative; 
     -webkit-overflow-scrolling: touch; 
     } 

     iframe { 
     width: 100%; 
     height: 100%; 
     } 

    </style> 

    </head> 
    <body> 
    <h1>Why won't this iframe scroll to where I want?</h1> 
    <div id="root"> 
     <div id="wrapper"> 
     <iframe src="https://s3.amazonaws.com/ios-iframe-test/iframe_content.html#scrolltome"></iframe> 
     </div> 
    </div> 
    </body> 
</html>

Und hier ist der iframe Inhalt:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
</head> 

<body> 

    <h1>Have some ipsum...</h1> 
    <p> 
    Lorem... (live example has much more here just to make the scrolling apparent) 
    </p> 

    <h1 style="color: red;"> 
    <a name="scrolltome" id="scrolltome">This is where I want to scroll></a> 
    </h1> 

    <p> 
    Lorem... 
    </p> 

</html>

Quelle

2016-10-28 roy

Safari hat viele Probleme beim Scrollen auf iframes. Können Sie eine JS-Lösung verwenden? –

Dies ist auf einem iOS-Safari Bug wobei Der Iframe wird auf die Höhe seines Inhalts erweitert. Sie können diese mit Safari Desktop-Debugger und den Betrieb überprüfen:

document.querySelector('iframe').offsetHeight

Die Lösung ist die Höhe des iframe Körper, indem Sie den Inhalt in einen position: fixed Behälter zu reduzieren und ermöglicht es zu blättern.

Zum Beispiel legen Sie den Inhalt des Körpers in einen <main>-Tag und den Stil wie folgt festgelegt:

<html> 
    <head> 
     <style> 
      main { 
      position: fixed; 
      top: 0; 
      right: 0; 
      bottom: 0; 
      left: 0; 
      padding: 10px; 
      overflow-y: scroll; 
      -webkit-overflow-scrolling: touch; 
      z-index: 1; 
      } 
     </style> 
    </head> 
    <body> 
     <main> 
      <h1>Have some ipsum...</h1> 
      <p>Lorem... (live example has much more here just to make the scrolling apparent)</p> 
      <h1 style="color: red;"> 
      <a name="scrolltome" id="scrolltome">This is where I want to scroll</a> 
      </h1> 
      <p> 
      Lorem... 
      </p> 
     </main> 
    </body> 
    </html>

Dies sagt Safari der Iframe Körper die gleiche Höhe wie die Seite ist, die es enthält, aber seine Inhalt ist scrollbar. Ihre Anker werden jetzt funktionieren.

Quelle

2017-07-14 23:33:02

iOS Safari scrollt nicht, um in iframe zu verankern

Antwort

Verwandte Themen