# IFrame CSS Code - Disable Scrolling Bar

**URL:** https://meta.discourse.org/t/iframe-css-code-disable-scrolling-bar/83254
**Category:** Support
**Created:** [March 18, 2018, 7:27pm UTC](https://meta.discourse.org/t/iframe-css-code-disable-scrolling-bar/83254 "2018-03-18T19:27:00Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![fellowshipforums](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fellowshipforums/32/93448_2.png) [@fellowshipforums](https://meta.discourse.org/u/fellowshipforums)
#### Post date: [March 18, 2018, 7:27pm UTC](https://meta.discourse.org/t/iframe-css-code-disable-scrolling-bar/83254/1 "2018-03-18T19:27:00Z")

</div>

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.

[https://www.fellowshipforums.com/t/question-1/277](https://www.fellowshipforums.com/t/question-1/277)

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

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [March 18, 2018, 8:16pm UTC](https://meta.discourse.org/t/iframe-css-code-disable-scrolling-bar/83254/2 "2018-03-18T20:16:21Z")

</div>

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.

```plaintext
<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:

```plaintext
<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.

---

<div class="post-metadata">

### Author: ![Nacho\_Caballero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nacho_caballero/32/130189_2.png) [@Nacho\_Caballero](https://meta.discourse.org/u/Nacho_Caballero)
#### Post date: [September 1, 2020, 6:16pm UTC](https://meta.discourse.org/t/iframe-css-code-disable-scrolling-bar/83254/12 "2020-09-01T18:16:05Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [September 1, 2020, 7:20pm UTC](https://meta.discourse.org/t/iframe-css-code-disable-scrolling-bar/83254/13 "2020-09-01T19:20:03Z")

</div>

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:

```plaintext
<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:

```plaintext
<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.

---

<div class="post-metadata">

### Author: ![Nacho\_Caballero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nacho_caballero/32/130189_2.png) [@Nacho\_Caballero](https://meta.discourse.org/u/Nacho_Caballero)
#### Post date: [September 3, 2020, 12:38pm UTC](https://meta.discourse.org/t/iframe-css-code-disable-scrolling-bar/83254/14 "2020-09-03T12:38:57Z")

</div>

This works beautifully. 👍 Thanks a lot, Taylor!

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [May 7, 2021, 1:09pm UTC](https://meta.discourse.org/t/iframe-css-code-disable-scrolling-bar/83254/15 "2021-05-07T13:09:09Z")

</div>

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

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [October 20, 2025, 7:58pm UTC](https://meta.discourse.org/t/iframe-css-code-disable-scrolling-bar/83254/16 "2025-10-20T19:58:28Z")

</div>



---

<div class="post-metadata">

### Author: ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP)
#### Post date: [September 30, 2025, 12:46am UTC](https://meta.discourse.org/t/iframe-css-code-disable-scrolling-bar/83254/17 "2025-09-30T00:46:57Z")

</div>

This works perfectly.

> [@IFrame CSS Code - Disable Scrolling Bar](https://meta.discourse.org/t/iframe-css-code-disable-scrolling-bar/83254/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-decorat…

The iFrame is pretty long, but no matter what height=value I use, it doesn’t seem to extend above a certain height. Is there a workaround for this?