web-dev-qa-db-fra.com

Iframe - Défilement vertical uniquement

J'ai un iframe. 

J'ai besoin d'une solution multi-navigateurs pour que seule la barre de défilement verticale soit visible, quelle que soit la largeur du contenu de l'iframe.

Ma solution a déjà une dépendance sur jQuery. Par conséquent, si cela n’est pas possible uniquement avec CSS, je suis ouvert aux solutions jQuery.

Comment puis-je faire ceci?

cssiframecross-browserscrollbarbrowser-scrollbars
7
smartcaveman

Vous pouvez ajuster les barres de défilement d'un iframe ou de tout élément avec le code CSS suivant:

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

Afin d'afficher uniquement la barre de défilement verticale dans une iframe, vous spécifiez que la largeur de l'iframe soit supérieure à la largeur de la page à l'intérieur de l'iframe.

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

Ou essayez ceci:

<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

Nesting ...

Placez le <div> sur la page en cours de chargement dans le <iframe> et vous pourrez contrôler les parchemins.

<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

cela fonctionne pour moi (même en safari aussi):

<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>

Ou vous pouvez le faire aussi:

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 ), doit pointer vers une URL et un fichier HTML valides. 

0
sputn1k