IFrame CSS-Code: Scrollleiste deaktivieren

Unterstützung
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 „Gefällt mir“
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 „Gefällt mir“
12

Hallo Taylor,

ist dies derzeit die empfohlene Methode, um das Scrollen in Iframes zu verhindern?

Wie würde man es umsetzen, wenn man es nicht auf ALLE Iframes, sondern nur auf bestimmte anwenden möchte?

13

Ah ja, seitdem hat sich definitiv einiges geändert! Nachfolgend findest du ein gezieltes Beispiel basierend auf unserer derzeit bevorzugten Dekorationsmethode.

Der folgende Code muss zum <head>-Tag eines Themes oder einer Komponente hinzugefügt werden:

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

Mit dem oben stehenden Code kannst du ein iframe mit einem bestimmten div wie folgt umschließen, um das Scrollen innerhalb eines Beitrags zu deaktivieren:

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

Das sollte funktionieren, aber lass mich wissen, falls du Probleme damit feststellst.

4 „Gefällt mir“
14

Das funktioniert hervorragend. :+1: Vielen Dank, Taylor!

2 „Gefällt mir“
15

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

17

Das funktioniert perfekt.

Der iFrame ist ziemlich lang, aber egal welchen height=value ich verwende, er scheint nicht über eine bestimmte Höhe hinauszugehen. Gibt es dafür eine Lösung?