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.

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

你好，Taylor，

这是目前推荐的使用 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>

这应该能解决问题，但如果您发现任何问题，请随时告知。

14

这效果太棒了。:+1: 非常感谢，Taylor！

17

这完美地解决了问题。

iFrame 很长，但无论我使用哪个 height=value，它似乎都无法扩展到某个高度以上。有什么解决办法吗？