Code CSS IFrame - Désactiver la barre de défilement

Soutien
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 « J'aime »
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 « J'aime »
12

Bonjour Taylor,

Est-ce la méthode actuellement recommandée pour empêcher le défilement dans les iframes ?

Comment procéder si vous ne souhaitez pas l’appliquer à TOUS les iframes, mais uniquement à certains d’entre eux ?

13

Ah oui, les choses ont certainement un peu changé depuis ! Ci-dessous, je vous propose un exemple ciblé basé sur notre méthode de décoration actuellement privilégiée.

Le code suivant devra être ajouté à la balise <head> d’un thème ou d’un composant :

<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>

Une fois cela en place, vous pouvez envelopper une iframe dans un div spécifique comme suit pour désactiver le défilement au sein d’un message :

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

Cela devrait faire l’affaire, mais faites-moi signe si vous rencontrez le moindre problème.

4 « J'aime »
14

Cela fonctionne à merveille. :+1: Merci beaucoup, Taylor !

2 « J'aime »
15

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

17

Cela fonctionne parfaitement.

L’iFrame est assez long, mais quelle que soit la valeur height= que j’utilise, il ne semble pas s’étendre au-delà d’une certaine hauteur. Existe-t-il une solution de contournement?