Código CSS para IFrame: Desactivar barra de desplazamiento

Soporte
1

Hi All,

I am trying to removed the scrolling bar feature in an iframe. I am using the following code, (overflow and scrolling commands) but it does not seem to be working - the iframe is still scrolling when the mouse hovers over it.

<iframe style= "overflow:hidden" scrolling="no" src="https://ruwix.com/widget/stopwatch-gen/"></iframe>

I have also tried adding this to the CSS customization page:

iframe {
  overflow: hidden;
}

Any help would be greatly appreciated. Thanks.

1 me gusta
2

I don’t see scrolling="no" in the iframe code on the page you linked to. When I add that attribute, it successfully hides the scrollbars on Safari, Firefox, and Chrome. Try replacing the current iframe code with what’s below. You should be able to leave everything else the same.

<iframe scrolling="no" src="https://ruwix.com/widget/stopwatch-gen/" frameborder="50" width="300px" height="55x"></iframe>

Edit: Nevermind. I tried on my test site and it looks like it strips the scrolling="no" when the post is cooked. Hopefully someone will chime in with a suggestion!

Edit 2.0:

Try adding this to the </head> tab of your current theme:

<script>
    $(function() {
        var ifr = $("iframe");
        ifr.attr("scrolling", "no");
        ifr.attr("src", ifr.attr("src"));
    });
</script>

Edit 3: Still issues with this after more testing. This is a tricky one.

5 Me gusta
12

Hola Taylor,

¿Es este el método recomendado actualmente para evitar el desplazamiento en iframes?

¿Cómo lo harías si no quisieras aplicarlo a TODOS los iframes, sino solo a algunos específicos?

13

¡Ah sí, definitivamente las cosas han cambiado un poco desde entonces! A continuación, incluyo un ejemplo específico basado en nuestro método de decoración preferido actualmente.

El siguiente código deberá agregarse a la etiqueta </head> de un tema o componente:

<script type="text/discourse-plugin" version="0.8.42">
  api.decorateCookedElement(post =>
    post.querySelectorAll('div[data-theme-iframe="no-scroll"] iframe').forEach(iframe => {
      iframe.setAttribute('scrolling', 'no');
    }),
    { 
      id: 'iframe-decorator',
      onlyStream: true,
    }
  );
</script>

Con lo anterior en su lugar, puedes envolver un iframe con un div específico de la siguiente manera para desactivar el desplazamiento dentro de una publicación:

<div data-theme-iframe="no-scroll">
  <iframe src="https://someallowediframesource.com"></iframe>
</div>

Eso debería solucionar el problema, pero avísame si encuentras algún inconveniente.

4 Me gusta
14

Esto funciona de maravilla. :+1: ¡Muchas gracias, Taylor!

2 Me gusta
15

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

17

Esto funciona perfectamente.

El iFrame es bastante largo, pero sin importar qué valor de height= use, no parece extenderse más allá de cierta altura. ¿Hay alguna solución para esto?