Question

在标签式容器中有一个iFrame，iFrame上有垂直和水平滚动条。一切都很好，直到我切换到另一个选项卡，然后再返回到第一个选项卡。滚动条突然消失了！使用小提琴这似乎只发生在Chrome中，而Firefox和IE似乎没问题（所有最新版本）。我已经在CSS和iFrame代码中获得了滚动命令。任何想法我能做些什么来解决这个问题？小提琴：https://jsfiddle.net/5163yg4d/

https://code.jquery.com/jquery-1.12.4.js
https://code.jquery.com/ui/1.12.1/jquery-ui.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css



    <div id="My_RH_BigContainer">
  <div id="RH_tabsContainer">

    <div class="sidebar">
      <div class="sidebar-img" style="display: block;">
        <label>Table 1</label>
      </div>

      <div class="sidebar-img">
        <label>Table 2</label>
      </div>

      <ul id="RH_TabsTable" class="nav-tabs">
        <li class="active"><a href='#Tabular1a_ws' rel="nofollow">Table 1</a></li>
        <li><a href="#myblank" rel="nofollow">Table 2</a></li>
      </ul>

    </div>

    <div id="TabContentID" class="tab-content">
      <div id="Tabular1a_ws" class="tab_pane">

        <iframe name="New_country_TABULAR" id="New_country_TABULAR" scrolling="yes" src="https://c2amf323.caspio.com/dp.asp?AppKey=3eb8400026cba1edcbdb4b28b774">Sorry, but your browser does not support frames.</iframe>
      </div>

      <div id="myblank" class="tab_pane">
      </div>

    </div>
  </div>
</div>





#New_country_TABULAR {
height: 200px;
overflow: scroll !important;
border: 1px solid #000 !important;
width: 100%;
}

#My_RH_BigContainer {
position: absolute;
height: 360px;
border: 1px solid red;
top: 20px;
left: 15px;
width: 360px;
}

#RH_tabsContainer {
Margin-top: 15px;
Margin-bottom: 5px;
Margin-left: 15px;
Margin-right: 15px;
border: 1px solid blue;
height: 330px;
padding: 0px 0px 0px 2px;
}

.sidebar-img {
display: none;
margin-top: 0px;
height: 40px;
background-color: lightgrey;
border: 0px solid black;
}

.nav-tabs {
border-radius: 0px 0px 0px 0px;
border-style: solid;
border-color: black;
border-width: 0px 0px 1px 0px;
background: transparent;
}

.nav-tabs > li {
float: left;
border-style: solid;
border-color: black;
}

.nav-tabs > li > a {
margin-right: 0px;
border-radius: 1px 1px 1px 1px;
background-image: none;
outline-color: transparent;
border: 0px solid grey;
line-height: 16px;
font-family: "Arial", sans-serif;
font-size: 12px;
font-weight: normal;
text-align: center;
height: 20px;
width: 115px;
}

.ui-tabs-active {
border-style: solid;
border-color: black !important;
border-width: 2px 2px 0px 2px;
}

.ui-tabs-active a {
color: red !important;
border-bottom: 1px solid #fff !important;
margin-bottom: -1px;
}

.nav-tabs > li > a:hover {
font-weight: bold;
background: white;
color: black;
}

#RH_TabsTable {
border-bottom: 1px solid black;
}




    $(function() {

  var index = 'qpsstats-active-tab';
  var dataStore = sessionStorage;
  var oldIndex = 0;
  try {
    // getter: Fetch previous value
    oldIndex = dataStore.getItem(index);
  } catch (e) {}

  $("#RH_tabsContainer").tabs({

    active: oldIndex,

    activate: function(event, ui) {
      //  Get future value
      var newIndex = ui.newTab.parent().children().index(ui.newTab);
      //  Set future value
      try {
        dataStore.setItem(index, newIndex);
     } catch (e) {}

      $('.sidebar-img').hide();
      $('.sidebar-img').eq(ui.newTab.index()).show();
    }
  });
})

Answer 1

我们遇到了同样的问题。我们的解决方案是通过每个标签更改通过js重新加载iFrame。

但很高兴看到其他解决方法。谢谢！

为什么滚动条会在Chrome中的选项卡式iFrame中消失

1 个答案: