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

在选项卡式容器中获得了一个iFrame，iFrame上有垂直和水平滚动条。一切都很好，直到我切换到另一个选项卡，然后再回到第一个选项卡。突然，滚动条消失了！使用小提琴，这似乎只发生在Chrome上，而Firefox和IE看起来还行（所有最新版本）。我已经在CSS和iFrame代码中使用了滚动命令。有人知道我能做些什么来解决这个问题吗？小提琴：

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
表1
表2




很抱歉，您的浏览器不支持框架。
#新国家/地区表格{
高度：200px；
溢出：滚动！重要；
边框：1px实心#000！重要；
宽度：100%；
}
#我的右大容器{
位置：绝对位置；
高度：360px；
边框：1px纯红；
顶部：20px；
左：15px；
宽度：360px；
}
#右舌容器{
边缘顶部：15px；
边缘底部：5px；
左边距：15px；
右边距：15px；
边框：1px纯蓝色；
高度：330px；
填充：0px 0px 0px 2px；
}
.侧边栏img{
显示：无；
边际上限：0px；
高度：40px；
背景颜色：浅灰色；
边框：0px纯黑；
}
.导航标签{
边界半径：0px 0px 0px 0px；
边框样式：实心；
边框颜色：黑色；
边框宽度：0px 0px 1px 0px；
背景：透明；
}
.nav选项卡>li{
浮动：左；
边框样式：实心；
边框颜色：黑色；
}
.导航选项卡>li>a{
右边距：0px；
边界半径：1px 1px 1px 1px；
背景图像：无；
轮廓颜色：透明；
边框：0px纯灰；
线高：16px；
字体系列：“Arial”，无衬线；
字体大小：12px；
字体大小：正常；
文本对齐：居中；
高度：20px；
宽度：115px；
}
.ui选项卡处于活动状态{
边框样式：实心；
边框颜色：黑色！重要；
边框宽度：2px2px0px2px；
}
.ui选项卡处于活动状态{
颜色：红色！重要；
边框底部：1px实心#fff！重要；
边缘底部：-1px；
}
.nav选项卡>li>a:悬停{
字体大小：粗体；
背景：白色；
颜色：黑色；
}
#RH_TabsTable{
边框底部：1px纯黑；
}
$（函数（）{
var索引='qpsstats活动选项卡'；
var数据存储=会话存储；
var oldIndex=0；
试一试{
//获取之前的值
oldIndex=dataStore.getItem（索引）；
}捕获（e）{}
$（“右选项卡容器”）.tabs({
活动：旧索引，
激活：功能（事件、用户界面）{
//获得未来价值
var newIndex=ui.newTab.parent（）.children（）.index（ui.newTab）；
//设定未来价值
试一试{
dataStore.setItem（index，newIndex）；
}捕获（e）{}
$（'.sidebar img'）.hide（）；
$（'.sidebar img'）.eq（ui.newTab.index（））.show（）；
}
});
})

我们也遇到了同样的问题。我们的解决方案是通过js通过每次选项卡更改重新加载iFrame

---

但很高兴看到另一个解决办法。谢谢

哇，我想我已经成功地回答了我自己的问题，这是我第一次能够回馈他人，而不是仅仅索取。我发现来回缩放并使用一个小延迟会使滚动条返回。请参阅最后更新的fiddle with addition jquery函数。小提琴：

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();
    }
  });
})