Iframe - Desplazamiento vertical Solo

Question

Tengo un iframe.

Necesito una solución de varios navegadores para garantizar que solo la barra de desplazamiento vertical esté visible, independientemente del ancho de los contenidos del iframe.

Mi solución ya tiene una dependencia en jQuery, por lo que si esto no es posible solo con CSS, estoy abierto a las soluciones de jQuery.

¿Cómo puedo hacer esto?

Answer 1

Para mostrar solo la barra de desplazamiento vertical en un iframe, especifique que el ancho del iframe es mayor que el ancho de la página dentro del iframe.

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

O pruebe esto:

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

Answer 2

Es posible ajustar las barras de desplazamiento de un iframe o cualquier elemento con el siguiente código CSS:

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

Answer 3

anidamiento ...

Ponga la <div> en la página que se carga dentro del y puede controlar las volutas.

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

Answer 4

esto funciona para mí (incluso en Safari también):

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

o se puede hacer esto también:

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), necesita señalar a un URL válido y un archivo HTML.