Codice CSS IFrame: disabilita la barra di scorrimento

Supporto
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 Mi Piace
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 Mi Piace
12

Ciao Taylor,

questo è il metodo attualmente consigliato per prevenire lo scorrimento negli iframe?

Come lo applicheresti se non volessi usarlo su TUTTI gli iframe, ma solo su quelli specifici?

13

Ah sì, le cose sono decisamente cambiate un po’ da allora! Di seguito ho incluso un esempio mirato basato sul nostro metodo di decorazione attualmente preferito.

Il seguente codice dovrĂ  essere aggiunto al tag <head> di un tema/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 quanto sopra in atto, puoi avvolgere un iframe con un div specifico in questo modo per disabilitare lo scorrimento all’interno di un post:

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

Questo dovrebbe risolvere il problema, ma fammi sapere se riscontri eventuali problemi.

4 Mi Piace
14

Funziona splendidamente. :+1: Grazie mille, Taylor!

2 Mi Piace
15

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

17

Funziona perfettamente.

L’iFrame è piuttosto lungo, ma indipendentemente dal valore di height= che uso, non sembra estendersi oltre una certa altezza. Esiste una soluzione alternativa?