IFrame CSS コード - スクロールバーを無効化

サポート
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
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
12

こんにちは、テイラーさん。

これは、iframe でのスクロールを防止するために現在推奨されている方法でしょうか？

すべての iframe に適用するのではなく、特定の iframe だけに適用したい場合は、どのように実装すればよいでしょうか？

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>

上記を設定した後、特定の div で iframe をラップすることで投稿内のスクロールを無効化できます。

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

これで問題なく動作するはずです。もし何か問題があれば、お知らせください。

「いいね！」 4
14

これは完璧に機能しています。:+1: タ일러さん、本当にありがとうございます！

「いいね！」 2
15

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

17

これは完璧に機能します。

iFrameはかなり長いですが、height=valueをいくつ使用しても、特定の高さ以上に拡張されないようです。回避策はありますか？