jquery - 保持水平滚动条固定

Question

我有一个显示框架集的弹出窗口，在我的一个框架中，我使用 jquery 选项卡来显示一些文本。

我的问题是当我尝试显示长文本或减小窗口大小时，水平滚动消失，然后我必须使用垂直滚动到达页面末尾的 x 滚动。我怀疑 jquery 选项卡，因为当我删除它时水平栏是固定的。

我尝试使用 css 属性但没有成功。

<script type="text/javascript">
  window.open("windowpoppup.html", "page",'width=1200px,height=400px,left=215px,top=25px,resizable=yes').focus();
</script>

windowpoppup.html

<frameset cols="250,*"> 
    <frame name="displayTabs" src="other.html" marginheight="0" marginwidth="0"     scrolling="auto">
    <frame name="otherContent" src="myTabs.html" marginheight="0" marginwidth="0"     scrolling="auto">
</frameset>

myTabs.html

HTML

<div id="tabs">
<ul style="background-color: white; position: fixed; width: 100%;margin-top: 39px;">
    <li><a class="tab1" id="0" href="#tab1">tab1</a></li>   
    <li><a class="tab2" id="1" href="#tab2">tab2</a></li>
    <li><a class="tab3" id="2" href="#tab3">tab3</a></li>   
</ul>

<div class="div1" id="tab1"><pre>long text</prev></div>
<div class="div2" id="tab2"></div>
<div class="div3" id="tab3"></div>

JavaScript

$(function() {

$( "#tabs" ).tabs({
  activate: function (event, ui) {
      var index = $('#tabs').tabs('option', 'active');
  } });

  });

Answer 1

根据我的理解，您想让弹出窗口具有响应性，这样即使窗口大小发生变化，您仍然可以滚动。

这可以使用 JQuery 的 $(window).resize() 来完成。

// You can customize padding based on your requirement
var paddingBottom = 100;

// Initial value
$('#tabs').height($(window).height() - paddingBottom )

// Resize event
$(window).resize(function(){ $('#tabs').height($(window).height() - paddingBottom ) })