كود CSS لـ IFrame - تعطيل شريط التمرير

الدعم
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

مرحبًا تايلور،

هل هذه هي الطريقة الموصى بها حاليًا لمنع التمرير داخل الإطارات المضمنة (iframes)؟

كيف يمكنك فعل ذلك إذا لم تكن تريد تطبيقه على جميع الإطارات المضمنة، بل على إطارات محددة فقط؟

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

هذا يعمل بشكل مثالي.

الإطار المضمن طويل جدًا، ولكن بغض النظر عن قيمة ارتفاع= التي أستخدمها، لا يبدو أنه يمتد فوق ارتفاع معين. هل هناك حل بديل لهذا؟