IFrame CSS Code - Disable Scrolling Bar

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.

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:

    $(function() {
        var ifr = $("iframe");
        ifr.attr("scrolling", "no");
        ifr.attr("src", ifr.attr("src"));

Edit 3: Still issues with this after more testing. This is a tricky one.


It’s probably best to ditch the iframe altogether. For a fun personal challenge, I came up with a rough proof of concept that applies the timer via a theme component. Right now, it adds a timer to the first post of a topic and has a few control buttons. It currently looks like this:

If this is something you’d want me to expand on, let me know. It’s an interesting customization to work on.


Thank you @tshenry for looking into this. The iframe solution was just the “quick and dirty” solution for us to get the timer functionality working. But YES, we are ABSOLUTELY interested in the custom timer that you were experimenting around with. Your solution looks way nicer and cleaner…but is something much beyond my scope in terms of my coding abilities. So again, yes, I am very interested in seeing what you come up with and being able to apply it to my forum.

1 Like

Alright sounds good, I’ll continue working on it and report back when I’ve got something that’s ready to show.


@tshenry In constructing this theme, I wonder if you are able to build in the ability for me to select which category or subcategories to apply this to? I would not want this theme applied across all posts on my forum, but rather only a select few categories.

For example, on our Forum I would want it the Timer Theme applied only to posts in the “Past Exam” category. Ideally, I’d love to be able to select exactly which posts in the “Past Exam” category for this to apply to since a Timer feature would be appropriate 99% of the time, but there are a few posts where having a Timer would be inappropriate. But this is something I could for sure work around by placing the 1% of posts where a Timer is inappropriate elsewhere (another Category), or even delete them.

1 Like

Funny you should mention this! I just added the ability to specify a tag as the determining factor for which topics the stopwatch will display. This keeps it from being applied to any “about” topics or whatever other topic in a given category you may not want the timer to show:

Does this work for you alright or would a tag be problematic to use in your scenario?

While we’re at it, are there any other aspects about it that I should consider? It’s just about done, I’m just refining the code and trying to thoroughly test it. Should be ready either this weekend or sometime next week :slightly_smiling_face:


This is what it looks like at the moment by the way:


I think this looks perfect! The tag indentifer is also a perfect solution to my question above. This is great work! Thank you.

1 Like

Alright, the theme component has been released! Please let me know if you find any issues with it or have any ideas on how it could be improved.

Also, for anyone interested in solving the original question on how to disable iframe scrolling, simply add this code to the </head> tab of a theme of your choice:

<script type="text/discourse-plugin" version="0.8.18">
   api.decorateCooked($elem => $elem.children('iframe').attr("scrolling", "no"));

(Shout-out to @vinothkannans for bringing to light the usefulness of decorateCooked() :grinning:)


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?

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,

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>

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


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