Código CSS para IFrame - Desabilitar barra de rolagem

Suporte
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 curtida
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 curtidas
12

Olá Taylor,

Este é o método atualmente recomendado para impedir a rolagem em iframes?

Como você faria isso se não quisesse aplicá-lo a TODOS os iframes, mas apenas a alguns específicos?

13

Ah sim, as coisas definitivamente mudaram um pouco desde então! Abaixo, incluí um exemplo direcionado com base no nosso método de decoração atualmente preferido.

O seguinte código precisará ser adicionado à tag </head> de um 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>

Com o código acima em vigor, você pode envolver um iframe com um div específico da seguinte maneira para desativar a rolagem dentro de uma postagem:

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

Isso deve resolver o problema, mas me avise se encontrar qualquer problema com isso.

4 curtidas
14

Isso funciona perfeitamente. :+1: Muito obrigado, Taylor!

2 curtidas
15

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

17

Isso funciona perfeitamente.

O iFrame é bem longo, mas não importa qual valor de height= eu use, ele não parece se estender acima de uma certa altura. Existe uma solução alternativa para isso?