web-dev-qa-db-de.com

Iframe - Nur vertikales Scrollen

Ich habe einen iframe 

Ich brauche eine browserübergreifende Lösung, um sicherzustellen, dass unabhängig von der Breite des iframe-Inhalts nur die vertikale Bildlaufleiste sichtbar ist.

Meine Lösung hat bereits eine Abhängigkeit von jQuery. Wenn dies nicht nur mit CSS möglich ist, bin ich offen für jQuery-Lösungen.

Wie kann ich das machen?

7
smartcaveman

Sie können die Bildlaufleisten eines iframe oder eines beliebigen Elements mit folgendem CSS-Code anpassen:

iframe{ width:500px; height: 500px; overflow-x: hidden; overflow-y: scroll }
11
x-freestyler

Um nur die vertikale Bildlaufleiste in einem Iframe anzuzeigen, geben Sie die Breite des Iframes so an, dass sie größer als die Seitenbreite im Iframe ist.

<iframe src="#" width="--" height="250">
  <p>Your browser does not support iframes.</p>
</iframe>

Oder probiere es aus:

<style>
    #scroll-box {
        background:#e6e6e6;
        width:150px;
        height: 150px;
        padding:15px;
        overflow-y: scroll
    }
</style>

<iframe id="scroll-box">
    <h3>Lorem ipsum dolor sit amet</h3>     
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</iframe>   
6
mgreen

Verschachtelung ...

Platzieren Sie den <div> auf der Seite, die geladen wird, innerhalb des <iframe> und Sie können die Scrolls steuern.

<iframe  scrolling="no" height="400" width="600" >
<div id="addcontent" style='width:600px;overflow-y:scroll;overflow-x:hidden;height:400px;position:relative;top:0px;left:0px;'>
</div>
</iframe>
3
Gary Hayes

das funktioniert für mich (auch auf safari):

<iframe src="http://url/file.html" frameborder="0" style="overflow-y:scroll !important; overflow-x:hidden !important; overflow:hidden;height:100%;width:100%;" scrolling="yes"></iframe>

Oder Sie können das auch tun:

CSS 

iframe {
    overflow-y:scroll !important;
    overflow-x:hidden !important;
    overflow:hidden;
    height:100%; /* optional */
    width:100%; /* optional */
    border:none; /* optional */
}

HTML 

<iframe src="http://url/file.html" scrolling="yes"></iframe>

* src ( http: //url/file.html ) muss auf eine gültige URL - und HTML - Datei zeigen. 

0
sputn1k