• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

iframe - Automatisches Scrollen

rschmidt

Neues Mitglied
Hallo zusammen,

folgendes Problem: Ich habe eine Website, die auf Monitoren angezeigt wird.
Unteranderem sind dort "externe Elemente" per iframe eingebunden. Das iFrame hat dabei eine Bestimmte Größe. Der eingebundene Inhalt passt hin und wieder nicht ganz in das IFrame und man müsste Scrollen um auch das Ende der Seite zu sehen.
Ist es möglich, dass der Inhalt eines IFrame "automatisch" scrollt? Als Laufband? Fange oben an, scrolle langsam nach unten und wenn er unten angekommen ist, fange wieder oben an?

Beim Suchen im Internet habe ich dazu irgendwie wenig gefunden....

Vielen Dank vorab.
 

Sempervivum

Senior HTML'ler
So etwas habe ich früher schon Mal gemacht, ist nicht besonders kompliziert. Ich versuche, es wiederzufinden ...
 

Sempervivum

Senior HTML'ler
... gefunden. Weil das Scrollen manchmal seine Tücken hat, habe ich es so gelöst, dass ich einen Container um den iFrame herum gelegt habe und dann ein negatives Margin für den iFrame animiert. Hat den selben Effekt wie Scrollen.
Code:
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>


</head>

<body>
    <style>
        .iframe-container {
            height: 50vh;
            width: 100vw;
            overflow: hidden;
        }
    </style>
    <div class="iframe-container">
        <iframe src="http://localhost/zz-test19.html"></iframe>
    </div>
    <script>
        const conts = document.querySelectorAll('.iframe-container');
        conts.forEach((item, idx) => {
            const iframe = item.querySelector('iframe'),
                hContainer = item.scrollHeight;
            iframe.onload = () => {
                const iFrameBody = iframe.contentWindow.document.body,
                    hiFrame = iFrameBody.scrollHeight,
                    wiFrame = iFrameBody.scrollWidth,
                    scrollAmount = hiFrame - hContainer;
                iframe.height = hiFrame;
                iframe.width = wiFrame;
                iframe.animate([
                    {
                        marginTop: 0, offset: 0
                    },
                    {
                        marginTop: 0, offset: 0.05
                    },
                    {
                        marginTop: -scrollAmount + 'px', offset: 0.75
                    },
                    {
                        marginTop: -scrollAmount + 'px', offset: 0.95
                    },
                    {
                        marginTop: 0, offset: 1
                    }
                ], {
                    iterations: Infinity,
                    duration: 10000
                });
            }
        });
    </script>
</body>


</html>
Einschränkung: Die Höhe des iFrame wird automatisch fest gelegt und dafür muss auf seinen Inhalt zugegriffen werden. Daher muss er auf der selben Domain liegen wie die Hauptseite. Wenn Du "fremde" iFrames einbindest, müssen wir noch Mal überlegen.
 
Werbung:

Neueste Beiträge

Oben