开发者社区> 问答> 正文

请问宜搭中嵌套iframe组件出现双滚动条如何解决?

宜搭中嵌套iframe组件后出现双滚动条,如何才能去除iframe组件上的滚动条
360截图20240213011407117.jpg

在iframe的样式中、父容器(选项卡)的样式中都已经设置了overflow: hidden;但是滚动条并没有隐藏,还是一样,设置如下图:
1.jpg
2.jpg

展开
收起
mrjonny 2024-02-13 02:13:23 370 0
来自:钉钉宜搭
2 条回答
写回答
取消 提交回答
  • 面对过去,不要迷离;面对未来,不必彷徨;活在今天,你只要把自己完全展示给别人看。

    要解决宜搭中嵌套iframe组件出现双滚动条的问题,可以尝试以下方法:

    1. 在iframe的父级元素中设置CSS样式,将overflow属性设置为hidden,以隐藏父级元素的滚动条。
    <style>
      .parent-container {
        overflow: hidden;
      }
    </style>
    
    <div class="parent-container">
      <iframe src="your_iframe_url" frameborder="0"></iframe>
    </div>
    
    1. 在iframe内部设置CSS样式,将bodyhtml元素的overflow属性设置为hidden,以隐藏iframe内部的滚动条。
    <style>
      body, html {
        overflow: hidden;
      }
    </style>
    
    <iframe src="your_iframe_url" frameborder="0"></iframe>
    
    1. 如果上述方法仍然无法解决问题,可以考虑使用JavaScript来控制滚动条的显示和隐藏。在父级元素中添加滚动事件监听器,当滚动事件发生时,根据需要显示或隐藏滚动条。
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        var parentContainer = document.querySelector('.parent-container');
        var iframe = document.querySelector('iframe');
    
        parentContainer.addEventListener('scroll', function () {
          if (parentContainer.scrollTop > 0 || parentContainer.scrollLeft > 0) {
            iframe.style.overflow = 'scroll';
          } else {
            iframe.style.overflow = 'hidden';
          }
        });
      });
    </script>
    
    <div class="parent-container">
      <iframe src="your_iframe_url" frameborder="0"></iframe>
    </div>
    

    尝试以上方法,应该可以解决宜搭中嵌套iframe组件出现双滚动条的问题。

    2024-02-16 17:33:58
    赞同 展开评论 打赏
  • 北京阿里云ACE会长

    image.png

    可以尝试以下方法去除iframe组件上的滚动条:

    1. 为iframe设置样式 overflow: hidden;,这样可以使iframe的内容不再显示滚动条。
    1. 为iframe的父容器设置样式 overflow: hidden;,这样可以使iframe及其内容都不再显示滚动条。


    1. 在iframe中设置
    ,这样只可以在iframe内部隐藏滚动条。

    以上方法可以去除iframe组件上的滚动条,但可能会影响iframe内容的正常显示。如果需要保留iframe内容的滚动条,可以尝试使用CSS的 ::-webkit-scrollbar 伪元素来隐藏滚动条,但需要注意该方法可能不适用于所有浏览器。

    image.png

    2024-02-13 07:29:27
    赞同 1 展开评论 打赏
问答分类:
问答地址:
关联地址:
相关产品:
来源圈子
更多
收录在圈子:
+ 订阅
「宜搭」是云钉原生低代码平台(钉钉 PaaS - aPaaS),让企业应用搭建更简单! 帮助中小企业降本提效,加强组织的数字化自主权; 帮助大型企业释放个体创新力,助力组织创新涌现。
相关文档: 宜搭
问答排行榜
最热
最新

相关电子书

更多
宜搭 - 企业智能化应用搭建平台 立即下载
《云市场-宜搭解决方案》 立即下载
《宜搭开发手册》 立即下载