解决easyui-tabs中使用iframe时出现两个垂直滚动条

淩亂°似流年 2022-06-17 06:39 160阅读 0赞

最近在使用easyui-tabs加iframe时，出现了两个垂直滚动条的现象，如下图所示  
![两个垂直滚动条的效果][SouthEast]  
前端代码如下：

<div id="infoDlg" class="easyui-dialog" data-options="closed:true,width:700,height:400,title:'案件信息',buttons:'#infobtns',onClose:CloseAllTab">
            <div id="infotabs" class="easyui-tabs" data-options="fit:true" >
            </div>
         </div>

向tabs中添加tab的js代码如下所示：

function ShowInfo() { 
        var row = $('#reusegrid').datagrid('getSelected');
        if (row) {
            var caseid = row.CaseId;
            var ckurl = '/Business/InfoBeforeToreView?id=' + caseid;
            AddTab(ckurl, "拆前信息",'infotabs');
            var reuseUrl = '/Reuse/ViewReuseInfos?id=' + row.Id;
            AddTab(reuseUrl, "利用信息",'infotabs');
            $('#infoDlg').dialog('open');
        }
        else {
            $.messager.alert("错误","请先选择要查看信息的记录","error");
        }
    }
    function AddTab(url, title,target) { 
        //存在，更新数据
        if ($('#'+target).tabs('exists', title)) {
            $('#' + target).tabs('select', title);
            var selTab = $('#tabs').tabs('getSelected', title);
            $('#' + target).tabs('update', {
                tab: selTab,
                options: {
                    content:createFrame(url)
                }
            })
        }
        else {
            $('#' + target).tabs('add', {
                title: title,
                content: createFrame(url),
                closable:true
            })
        }
    }
    function createFrame(url) { 
        var s = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';
        return s;
    }

根据代码可以猜测，出现两个滚动条，其中一个肯定是iframe中内容过多出现的滚动条，这个也正是我们实际所需要的滚动条，另外一个滚动条不知道到是如何出现的，但是猜测可能与easyui-tabs控件本身有关，出现滚动条，可以肯定的是内容超出了高度范围，而我们所熟知的隐藏超出内容的方式就是overflow：hidden的方式来用css控制，根据这个想法，查看此时的DOM文档结构，如下图  
![文档结构][SouthEast 1]  
可以看到，每一个tab其实对应着一个class为panel的div，而panel中的内容显示在class为panel-body的div中，可以尝试直接在DOM上的这个panel-body上添加一个css，overflow:hidden,然后查看效果，如图  
![直接在DOM上修改][DOM]  
修改后可以直接看到结果，如下，可以看到已经达到想要的结果  
![修改后的结果][SouthEast 2]  
由于我们所能知道的DOM结构为我们设置的tabs的id即‘infotabs’，观察文档的DOM，需要找到对应的panel-body，最终使用CSS如下，即可达到效果

<style type="text/css"> #infotabs .tabs-panels>.panel>.panel-body { overflow: hidden; } </style>

GOOD LUCK！！！！

[SouthEast]: /images/20220617/436260f7132047f38cc38b95db33a159.png
[SouthEast 1]: /images/20220617/a0634d28b3e143c4bdac7bd60b49a03f.png
[DOM]: /images/20220617/2edb71da45fe4beb9157b4b32b55959f.png
[SouthEast 2]: /images/20220617/bf57140192144225bd3bb6eaff0d9c1a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，160人围观）

还没有评论，来说两句吧...

相关阅读

相关 Freemarker中 div 嵌入、包含、include iframe 保留垂直滚动条实践

摘要：今天在做自己的博客项目时，遇到了在freemarker页面的div里面嵌入iframe，以用来显示阿里的druid监控管理页面，现在把解决过程记录下。一：首先看下实际

蔚落/ 2024年02月18日 21:27/ 0 赞/ 4 阅读

相关 LinearLayout 垂直滚动条

activity中经常只是一个LinearLayout，但这样的话，如果activity内容超过一屏，无法滚动查看下面的内容。这时只需在外面嵌套一个ScrollView就可

系统管理员/ 2022年08月09日 15:56/ 0 赞/ 180 阅读

相关解决easyui-tabs中使用iframe时出现两个垂直滚动条

最近在使用easyui-tabs加iframe时，出现了两个垂直滚动条的现象，如下图所示 ![两个垂直滚动条的效果][SouthEast] 前端代码如下： <

淩亂°似流年/ 2022年06月17日 06:39/ 0 赞/ 161 阅读

相关 iframe去掉竖向滚动条仍可以滚动

iframe内部页面代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset

迷南。/ 2022年06月05日 06:46/ 0 赞/ 603 阅读

相关 ios上iFrame滚动条失效

在做公户号的时候，有一个页面引入了IFrame。然后出现了一个很尴尬的问题，iframe不出现滚动条，而且在屏幕高度以外的内容都被截掉了。百度之后，找到了解决方案，亲测可行

短命女/ 2022年05月27日 09:50/ 0 赞/ 157 阅读

相关 overflow:auto 时页面滚动条出现时跳动

产生环境: ![这里写图片描述][70] ant.design写的Item的时候,给选中添加背景.但是发现,在点击全部时,页面会有跳动,其他章节则不会有跳动. 章节内

蔚落/ 2022年05月23日 01:12/ 0 赞/ 419 阅读

相关 Jquery 操作页面中iframe自动跟随窗口大小变化，而不出现滚动条，只在iframe内部出滚动条...

//调用函数 var pagestyle = function() { var rframe = $("mainFrame");

傷城~/ 2022年05月16日 09:21/ 0 赞/ 109 阅读

相关 iframe的滚动条问题：显示/隐藏滚动条

1. XHTML 1.0 Transitional 标准不能显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

冷不防/ 2022年02月15日 15:29/ 0 赞/ 428 阅读

相关第48天：垂直滚动条

垂直滚动条 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta c

朴灿烈づ我的快乐病毒、/ 2022年02月09日 20:51/ 0 赞/ 220 阅读

相关 easyui tabs 使用iframe 出现两个垂直滚动条解决方法

最近在使用easyui-tabs加iframe时，出现了两个垂直滚动条的现象，如下图所示 ![两个垂直滚动条的效果][SouthEast] 前端代码如下：

拼搏现实的明天。/ 2021年08月26日 12:14/ 0 赞/ 364 阅读