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.

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.

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

테일러님,

이것이 현재 iframe에서 스크롤을 방지하는 데 권장되는 방법인가요?

모든 iframe에 적용하는 것이 아니라 특정 iframe에만 적용하려면 어떻게 해야 하나요?

13

아, 네, 그때 이후로 상황이 확실히 좀 바뀌었네요! 아래에 현재 우리가 선호하는 장식(decoration) 방법을 기반으로 한 구체적인 예시를 포함했습니다.

다음 코드는 테마/컴포넌트의 </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: 테일러, 정말 감사합니다!

17

이것은 완벽하게 작동합니다.

iFrame이 꽤 긴데, height 값을 어떻게 설정해도 특정 높이 이상으로 확장되지 않는 것 같습니다. 이 문제를 해결할 수 있는 방법이 있을까요?