IFrame CSS Code - Disable Scrolling Bar

Поддержка
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.

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.

12

Привет, Тейлор,

Это ли сейчас рекомендуемый способ отключить прокрутку во фреймах?

Как бы вы это сделали, если бы не хотели применять это ко всем фреймам, а только к конкретным?

13

Ага, да, с тех пор многое немного изменилось! Ниже я привёл целевой пример, основанный на нашем текущем предпочтительном методе оформления.

Следующий код необходимо добавить в тег </head> темы или компонента:

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

При наличии этого кода вы можете обернуть iframe в специальный div следующим образом, чтобы отключить прокрутку внутри поста:

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

Это должно решить проблему, но дайте знать, если столкнётесь с какими-либо трудностями.

14

Это работает отлично. :+1: Большое спасибо, Тейлор!

17

Это работает отлично.

iFrame довольно длинный, но независимо от того, какое значение height я использую, он не расширяется выше определённой высоты. Есть ли какое-либо решение этой проблемы?