IFrame CSS Code - Disable Scrolling Bar

Support
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 Like
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 Likes
12

Hi Taylor,

Is this the currently recommended method to prevent scrolling in iframes?

How would you do it if you didn’t want to apply it to ALL iframes, but just specific ones?

13

Ah yes, things have definitely changed a bit since then! Below I’ve included a targeted example based on our currently preferred decoration method.

The following code will need to be added to the </head> tag of a theme/component:

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

With the above in place, you can wrap an iframe with a specific div like so to disable the scroll within a post:

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

That should do the trick, but let me know if you find any issues with it.

4 Likes
14

This works beautifully. :+1: Thanks a lot, Taylor!

2 Likes
15

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