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?
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 }
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>
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>
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.