Quiero habilitar el desplazamiento de iframe en pantallas más grandes (ancho mínimo: 768 px), pero deshabilitar el desplazamiento de iframes en pantallas más pequeñas (por ejemplo, dispositivos móviles y tabletas). Básicamente imita el comportamiento del iframe en https://musescore.com/user/4534311/scores/8352662
La aplicación simple de desbordamiento: oculto en una consulta de medios no funciona. Ni siquiera puedo eliminar la barra de desplazamiento con scrolling="no" en el elemento iframe.
Lo siguiente no funciona (tengo una altura CSS de 88vh aplicada al elemento iframe), y si lo hiciera, deshabilitaría permanentemente el desplazamiento:
<iframe src="https://musescore.com/user/4534311/scores/8352662/embed" frameborder="0" allowfullscreen scrolling="no" style="overflow:hidden" allow="autoplay; fullscreen"></iframe>Al agregar eventos de puntero: ninguno; a la clase iframe css evita el desplazamiento, también deshabilita los controles de reproducción, lo que no quiero. Sospecho que la respuesta requiere javascript, del cual sé poco. ¿Sugerencias para alguien?
Es un poco complicado, pero puede deshabilitar los eventos de puntero para el iframe para puntos de interrupción específicos:
pointer-events: none;Al colocar un div en la parte superior usando un posicionador absoluto :: después del selector, pude obtener lo que quería.
CSS:
/* use fit-content to shrink parent container to height of iframe */ .musescore { position: relative; height: fit-content; margin: 0; padding: 0; } /* Medium Screen size 768px. Add top layer to block scrolling. 70px of top space is left open for play controls */ @media (max-width: 767px) { .musescore::after { position: absolute; inset: 70px 0 0; display: block; content: ''; } } /* Specify dimensions of iframe. Remove margins/padding on Musescore's iframe. Besides setting a height and width, the rest is not necessary. */ .musescore iframe { --margin: -8px; margin: var(--margin); width: calc(100% - (var(--margin) * 2)) !important; height: calc((var(--vh, 1vh) * 88) - (var(--margin) * 2)); }HTML:
<figure class="musescore"> <iframe src="https://musescore.com/user/4534311/scores/8352662/embed" frameborder="0" allowfullscreen allow="autoplay; fullscreen"></iframe></figure>Déjame saber si todavía hay una mejor manera de hacer esto.