css - personalizar - Safari/Chrome(Webkit)-No se puede ocultar la barra de desplazamiento vertical iframe
ocultar scroll css (17)
Tengo un iframe en www.example.com que apunta a support.example.com (que es un CNAME para un dominio extranjero).
Redimensiono automáticamente la altura de mi iframe para que el marco no necesite barras de desplazamiento para mostrar la página web contenida.
En Firefox e IE esto funciona muy bien, no hay barra de desplazamiento ya que utilizo <iframe ... scrolling="no"></iframe> . Sin embargo, en los navegadores webkit (Safari y Chrome), la barra de desplazamiento vertical persiste incluso cuando hay espacio suficiente para la página sin la barra de desplazamiento (la barra de desplazamiento está atenuada).
¿Cómo oculto la barra de desplazamiento para los navegadores webkit?
¿Esto ayuda? Funciona en Chrome, IE, FF ...
<style type="text/css">
html { overflow:hidden; }
#test { position:absolute; top:50; left:50; right:50; bottom:50; height:2000px; }
</style>
<body scroll="no">
<div id="test">content</div>
</body>
¿Puede establecer la propiedad CSS overflow-y para el IFRAME ya sea visible u hidden ?
1.cuando cambia el sí o el rollo de iframe si o no, la barra de desplazamiento del iframe no se muestra inmediatamente, debe actualizar el iframe.
2.el desbordamiento de tap html en iframe colud influye en la barra de desplazamiento del iframe
3.en el IE, debe borrar el src de iframe, luego actualizar iframe, será un trabajo
4.so, mostrarle el código
html
<iframe id="main_ifrm" class="main" frameborder="0" scrolling="no" src="new.html" ></iframe>
<button id="btn1">scrolling yes</button>
javascript
var ifrm = document.getElementById("main_ifrm");
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
$(ifrm).prop("scrolling","no");
$(ifrm.contentWindow.document).find("html").css("overflow","hidden")
var src = $(ifrm).prop("src");
$(ifrm).prop("src","");
$(ifrm).prop("src",src);
}
Acabo de resolverlo en mi blog con desplazamiento = "no" después de la etiqueta de estilo.
p.ej:
iframe src="asdf.html" style="overflow: hidden;" scrolling="no"
Dejé el atributo de estilo allí porque es más apropiado y funcionó bien en Firefox.
Acabo de toparme con este problema y descubrí que la solución era establecer el overflow: hidden en la etiqueta HTML de la página dentro del iframe .
El uso de Chrome 8.0.552.224 beta en Ubuntu 10.10 muestra aún las barras de desplazamiento fantasmas en este sitio: http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe_scrolling . Probé todos los trucos que funcionan en todos los navegadores pero no en el navegador basado en WebKit. Por lo tanto, parece que el error no se ha solucionado por completo.
Establecer el atributo de desplazamiento del iframe en "no" debería solucionarlo, pero parece que hay un error en el kit web: bugs.webkit.org/show_bug.cgi?id=29240
La solución temporal de Tim ( Safari / Chrome (Webkit) - No se puede ocultar la barra de desplazamiento vertical del iframe ) parece solucionar el problema, siempre que tenga la capacidad de editar el documento contenido en el iframe ...
Para deshacerse de las barras de desplazamiento en gris, ponga "overflow: hidden;" en la etiqueta del cuerpo de la página que se muestra en el iframe, por ejemplo <body style="overflow:hidden;"> Esto funcionó bien para mí en Chrome 8.0.552.215 y también tuve "overflow: hidden" en el propio iframe
Prueba esto...
iframe { overflow:hidden; }
Puede ocultar las barras de desplazamiento y mantener la funcionalidad de desplazamiento (mediante el panel táctil o la rueda de desplazamiento, o tocar y arrastrar en un teléfono móvil o tableta, utilizando:
<style>
iframe::-webkit-scrollbar {
display: none;
}
</style>
Obviamente, puede cambiar iframe a lo que se ajuste a su diseño, y puede agregar la propiedad equivalente -mozilla- para que funcione también en Firefox.
Supongo que has intentado esto, pero ¿has configurado el desplazamiento en no en el iframe?
<iframe scrolling="no">
compruebe si el desplazamiento es realmente del iframe, tal vez es del HTML o BODY.
Para desplazamiento en iframe
<iframe scrolling="no">
En css
iframe { overflow:hidden; }
or
iframe { overflow-x:hidden; overflow-y:hidden}
no use la etiqueta de desplazamiento en absoluto en el iframe y agregue el estilo como style = "overflow-x: hidden; overflow-y: auto;" esto eliminará el desplazamiento horizontal y también debería funcionar al revés.
-Jai
ocultar iframe desplazamiento en cromo poner etiqueta de cuerpo como este
<body style="margin:0px; padding:0px; overflow:hidden;"></body>
<iframe> <body style="overflow-x: hidden"> </body> </iframe>
Note: this is useful if you cannot edit the CSS / HTML of the iFramed content.
Es un poco complicado, pero resolví este problema envolviendo el <iframe> en un <div> , estableciendo el alto, el ancho y el overflow:hidden del <div> overflow:hidden , luego estableciendo el ancho y alto del <iframe> desbordar realmente el envoltorio <div> .
<style>
div {height:100px;width:100px;overflow:hidden}
iframe {height:150px;width:150px;overflow:hidden}
</style>
<div>
<iframe src="foo.html" scrolling="no"></iframe>
</div>
Espero que esto ayude.
document.body.addEventListener(''touchmove'', function(e){ e.preventDefault(); });
Esto funciona, ninguno de los otros parecía funcionar, incluido el e.preventDefault() para touchstart.