I want to enable scrolling of iframe on larger displays (min-width: 768px), but disable scrolling on iframes on smaller displays (e.g., mobile and tablets). Basically mimic the iframe behaviour at https://musescore.com/user/4534311/scores/8352662
Simple applying overflow:hidden on a media query doesn't work. I can't even remove the scroll bar with scrolling="no" on the iframe element.
The following doesn't work (I do have a css height of 88vh applied to the iframe element), and if it did it would permanently disable scrolling:
<iframe src="https://musescore.com/user/4534311/scores/8352662/embed" frameborder="0" allowfullscreen scrolling="no" style="overflow:hidden" allow="autoplay; fullscreen"></iframe>
While adding pointer-events: none; to the iframe css class does prevent scrolling it also disables the play controls, which I don't want. I suspect the answer requires javascript, of which I know little. Suggestions anyone?
It is kinda hacky way but you can disable the pointer events for the iframe for specific breakpoints:
pointer-events: none;
Layering a div on top using a absolute positioned ::after selector, I was able to get what I want.
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>
Let me know if there is still a better way of doing this.