我有一个显示框架集的弹出窗口,在我的一个框架中,我使用 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');
} });
});
最佳答案
根据我的理解,您想让弹出窗口具有响应性,这样即使窗口大小发生变化,您仍然可以滚动。
这可以使用 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 ) })
关于jquery - 保持水平滚动条固定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25914609/