Iframe HTML: deshabilitar el desplazamiento

Tengo el siguiente iframe en mi sitio:

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe>

Y tiene barras de desplazamiento.
¿Cómo deshacerse de ellos?

Desafortunadamente, no creo que sea posible en HTML5 totalmente conforme con solo propiedades HTML y CSS. Sin embargo, afortunadamente, la mayoría de los navegadores aún admiten la scrollingpropiedad (que se eliminó de la especificación HTML5 ).

overflowno es una solución para HTML5, ya que el único navegador moderno que lo admite incorrectamente es Firefox.

Una solución actual sería combinar los dos:

<iframe src="" scrolling="no"></iframe>

iframe {
  overflow: hidden;
}

Pero esto podría volverse obsoleto a medida que se actualicen los navegadores. Es posible que desee comprobar esto para obtener una solución de JavaScript: http://www.christersvensson.com/html-tool/iframe.htm

Editar: lo he comprobado y scrolling="no"funcionaré en IE10, Chrome 25 y Opera 12.12.

Resolví el mismo problema con este css:

    pointer-events:none;

Parece funcionar usando

html, body { overflow: hidden; }

dentro del IFrame

editar: Por supuesto, esto solo funciona, si tiene acceso al contenido del Iframe (que tengo en mi caso)

Establezca todo el contenido en:

#yourContent{
 width:100%;
height:100%;  // in you csss
}

El caso es que el desplazamiento del iframe lo establece el contenido, NO el iframe por sí mismo.

configura el contenido al 100% en el interior con CSS y el deseado para el iframe en HTML

Intenté scrolling = "no" en mi navegador actual (versión de Google Chrome 60.0.3112.113 (compilación oficial) (64 bits)) y no funcionó. Sin embargo, scroll = "no" funcionó. Podría valer la pena intentarlo

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scroll="no" style="overflow: hidden"></iframe>

Agregue estos estilos ... para su etiqueta iframe ...

overflow-x:hidden;
overflow-y:hidden;

Dado que el "desbordamiento: oculto"; La propiedad no funciona correctamente en el iFrame, pero parece dar resultados cuando se aplica al cuerpo de la página dentro del iFrame, intenté esto:

iframe body { overflow:hidden; }

Que sorprendentemente hizo el trabajo con Firefox, la eliminación de esas barras de desplazamiento molestos.

Sin embargo, en Safari, ha aparecido una extraña línea transparente de 2 píxeles de ancho en el lado derecho del iframe, entre su contenido y su borde. Extraño.

Simplemente agregue un iframe con el estilo de cualquiera de las opciones siguientes. Espero que esto resuelva el problema.

1ª opción:

<iframe src="https://www.skyhub.ca/featured-listing" style="position: absolute; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>

2da opción:

<iframe src="https://www.skyhub.ca/featured-listing" style="display: none;" onload="this.style.display='block';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>

Esto funciona para mi:

<style>
*{overflow:hidden!important;}
html{overflow:scroll!important;}
</style>

Nota: si necesita barra de desplazamiento en cualquier otro elemento, agregue también css {overflow:scroll!important;}a ese elemento

Para este marco:

    <iframe src="" name="" id=""></iframe>

Intenté esto en mi código css:

    iframe#put the value of id here::-webkit-scrollbar {
         display: none;
    }

debajo de las versiones html5

iframe {
    overflow:hidden;
}

En html5

<iframe seamless="seamless"  ....>


iframe[seamless]{

   overflow: hidden;
}

pero aún no es compatible correctamente

Puede utilizar el siguiente código CSS:

margin-top: -145px; 
margin-left: -80px;
margin-bottom: -650px;

Para limitar la vista del iframe.