Quiero ocultar la barra de desplazamiento del sitio web principal y mostrar solo la barra de desplazamiento iframe. Pero cuando aplico la propiedad oculta de desbordamiento al cuerpo, se aplicará globalmente, pero solo quiero aplicar esa página donde está disponible. ¿Cómo puedo hacer eso? ¿alguien puede ayudarme por favor?
Use JavaScript para determinar la existencia del elemento iframe y luego elimine o agregue la clase a la etiqueta del body en consecuencia. Así es cómo:
if(!document.querySelector('iframe')){ document.querySelector('body').classList.add = "newClass"; } else{ document.querySelector('body').classList.remove = "newClass"; //In case class was already added }Espero que esto resuelva tu pregunta.
Para agregar/eliminar clases al cuerpo, puede escribir un código js como:
Si usa jQuery:
jQuery(document).ready(function ($) { if ( $('iframe').length ) { $(body).addClass('is-iframe'); } else { $(body).removeClass('is-iframe'); } });Puro js:
window.addEventListener("load", function(event) { if ( document.querySelector('iframe') ){ document.querySelector('body').classList.add('is-iframe') } else { document.querySelector('body').classList.remove('is-iframe') } });Creo que también puedes establecer algunos estilos para body.is-iframe y para el elemento iframe:
body.is-iframe { position: relative; width: 100vw; height: 100vh; } body.is-iframe iframe { position: aboslute; width: 100%; height: 100%; overflow-y: auto; }Todavía no probé este código, pero supongo que debería funcionar.