這個問題在Firefox中沒有發生,但用戶基礎完全在IE上。在IE中切換jQuery UI標籤失去滾動位置
在下面的頁面上,有三個選項卡的模型,其高度設置爲一個值和一個自動溢出。當您滾動到Tab One中的某個位置並切換到其他任何位置並返回時,IE中的滾動位置丟失(僅用IE 8測試過),但保留在Firefox(3.6.3)中。
在標籤切換期間我們將如何保留滾動位置?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing Tabs and Page Scroll Position</title>
<style type="text/css">
.rootContainer {
height: 600px;
width: 800px;
margin: 100px;
}
.myTabs {
padding: 25px;
min-height: 400px;
height: 400px;
overflow: auto;
}
#tabOne {
background-color: #ff9999;
}
#tabTwo {
background-color: #99ff99;
}
#tabThree {
background-color: #9999ff;
}
</style>
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/cupertino/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
</head>
<body>
<div class="rootContainer">
<div id="tabsContainer">
<ul>
<li><a href="#tabOne">Tab One</a></li>
<li><a href="#tabTwo">Tab Two</a></li>
<li><a href="#tabThree">Tab Three</a></li>
</ul>
<div id="tabOne" class="myTabs">
Tab One Content
<div id="tabOneContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt lacinia tellus, at lobortis
magna lacinia eget. Curabitur sed eros mauris, ut malesuada purus? Maecenas porta fringilla mauris, non
molestie est bibendum ut. Sed bibendum massa vitae tortor blandit eget condimentum nunc cursus.
Vestibulum gravida orci eget metus suscipit et cursus lacus suscipit. Nunc lacinia ipsum sit amet leo
iaculis sed viverra nunc sodales? Nam accumsan facilisis neque; vel convallis sem rhoncus auctor. Proin
vel augue quis metus consectetur tincidunt. Nulla ac tortor neque, porttitor tincidunt purus. Duis eget
faucibus massa. Sed ut risus eget lorem adipiscing ultricies eu vel erat.
<br/>
<br/>
Aliquam sed nulla vitae justo eleifend cursus. Curabitur imperdiet varius consectetur. Aliquam erat
volutpat. Aenean congue fermentum turpis, in convallis est pharetra et. Nunc elementum congue erat,
viverra tempor lectus tincidunt sed. Quisque varius, elit ac scelerisque egestas, justo diam facilisis
nisl, quis rutrum mi enim sit amet ligula. Aliquam sem leo, interdum vitae sollicitudin faucibus,
sollicitudin id sem. Aenean venenatis urna at diam mattis laoreet. Quisque consectetur urna sit amet
lacus volutpat ac volutpat erat congue. Nulla aliquam commodo tortor quis eleifend. Phasellus vitae nisi
sit amet odio vestibulum tempor ac sit amet tortor. Duis urna augue, vestibulum sed mollis in; bibendum
eu lectus.
<br/>
<br/>
Vestibulum blandit faucibus tempor. Mauris eget placerat lorem. Nullam ac lacus non nunc rhoncus
bibendum! Suspendisse ut augue orci? Aenean leo est, adipiscing sed aliquet quis, feugiat sed velit.
Cras ut quam et dolor cursus mattis ut vel risus. Integer eu hendrerit felis. Mauris tempus purus ut
nisi tincidunt at lobortis nibh tristique. Fusce eleifend egestas augue nec iaculis. Integer nisi felis,
facilisis eu iaculis in, tincidunt feugiat purus! Ut et enim id augue porttitor semper ac sit amet arcu.
Sed sed justo ut lectus accumsan egestas ac vitae sapien. Nunc lacinia condimentum tellus non ultrices.
Sed congue aliquet neque, vel fermentum augue tincidunt a? In non nulla non magna facilisis pulvinar.
Aenean at consequat neque! Suspendisse pellentesque eleifend fermentum. Cras nisi mauris, porttitor at
malesuada vitae; venenatis vel magna.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt lacinia tellus, at lobortis
magna lacinia eget. Curabitur sed eros mauris, ut malesuada purus? Maecenas porta fringilla mauris, non
molestie est bibendum ut. Sed bibendum massa vitae tortor blandit eget condimentum nunc cursus.
Vestibulum gravida orci eget metus suscipit et cursus lacus suscipit. Nunc lacinia ipsum sit amet leo
iaculis sed viverra nunc sodales? Nam accumsan facilisis neque; vel convallis sem rhoncus auctor. Proin
vel augue quis metus consectetur tincidunt. Nulla ac tortor neque, porttitor tincidunt purus. Duis eget
faucibus massa. Sed ut risus eget lorem adipiscing ultricies eu vel erat.
<br/>
<br/>
Aliquam sed nulla vitae justo eleifend cursus. Curabitur imperdiet varius consectetur. Aliquam erat
volutpat. Aenean congue fermentum turpis, in convallis est pharetra et. Nunc elementum congue erat,
viverra tempor lectus tincidunt sed. Quisque varius, elit ac scelerisque egestas, justo diam facilisis
nisl, quis rutrum mi enim sit amet ligula. Aliquam sem leo, interdum vitae sollicitudin faucibus,
sollicitudin id sem. Aenean venenatis urna at diam mattis laoreet. Quisque consectetur urna sit amet
lacus volutpat ac volutpat erat congue. Nulla aliquam commodo tortor quis eleifend. Phasellus vitae nisi
sit amet odio vestibulum tempor ac sit amet tortor. Duis urna augue, vestibulum sed mollis in; bibendum
eu lectus.
<br/>
<br/>
Vestibulum blandit faucibus tempor. Mauris eget placerat lorem. Nullam ac lacus non nunc rhoncus
bibendum! Suspendisse ut augue orci? Aenean leo est, adipiscing sed aliquet quis, feugiat sed velit.
Cras ut quam et dolor cursus mattis ut vel risus. Integer eu hendrerit felis. Mauris tempus purus ut
nisi tincidunt at lobortis nibh tristique. Fusce eleifend egestas augue nec iaculis. Integer nisi felis,
facilisis eu iaculis in, tincidunt feugiat purus! Ut et enim id augue porttitor semper ac sit amet arcu.
Sed sed justo ut lectus accumsan egestas ac vitae sapien. Nunc lacinia condimentum tellus non ultrices.
Sed congue aliquet neque, vel fermentum augue tincidunt a? In non nulla non magna facilisis pulvinar.
Aenean at consequat neque! Suspendisse pellentesque eleifend fermentum. Cras nisi mauris, porttitor at
malesuada vitae; venenatis vel magna.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt lacinia tellus, at lobortis
magna lacinia eget. Curabitur sed eros mauris, ut malesuada purus? Maecenas porta fringilla mauris, non
molestie est bibendum ut. Sed bibendum massa vitae tortor blandit eget condimentum nunc cursus.
Vestibulum gravida orci eget metus suscipit et cursus lacus suscipit. Nunc lacinia ipsum sit amet leo
iaculis sed viverra nunc sodales? Nam accumsan facilisis neque; vel convallis sem rhoncus auctor. Proin
vel augue quis metus consectetur tincidunt. Nulla ac tortor neque, porttitor tincidunt purus. Duis eget
faucibus massa. Sed ut risus eget lorem adipiscing ultricies eu vel erat.
<br/>
<br/>
Aliquam sed nulla vitae justo eleifend cursus. Curabitur imperdiet varius consectetur. Aliquam erat
volutpat. Aenean congue fermentum turpis, in convallis est pharetra et. Nunc elementum congue erat,
viverra tempor lectus tincidunt sed. Quisque varius, elit ac scelerisque egestas, justo diam facilisis
nisl, quis rutrum mi enim sit amet ligula. Aliquam sem leo, interdum vitae sollicitudin faucibus,
sollicitudin id sem. Aenean venenatis urna at diam mattis laoreet. Quisque consectetur urna sit amet
lacus volutpat ac volutpat erat congue. Nulla aliquam commodo tortor quis eleifend. Phasellus vitae nisi
sit amet odio vestibulum tempor ac sit amet tortor. Duis urna augue, vestibulum sed mollis in; bibendum
eu lectus.
<br/>
<br/>
Vestibulum blandit faucibus tempor. Mauris eget placerat lorem. Nullam ac lacus non nunc rhoncus
bibendum! Suspendisse ut augue orci? Aenean leo est, adipiscing sed aliquet quis, feugiat sed velit.
Cras ut quam et dolor cursus mattis ut vel risus. Integer eu hendrerit felis. Mauris tempus purus ut
nisi tincidunt at lobortis nibh tristique. Fusce eleifend egestas augue nec iaculis. Integer nisi felis,
facilisis eu iaculis in, tincidunt feugiat purus! Ut et enim id augue porttitor semper ac sit amet arcu.
Sed sed justo ut lectus accumsan egestas ac vitae sapien. Nunc lacinia condimentum tellus non ultrices.
Sed congue aliquet neque, vel fermentum augue tincidunt a? In non nulla non magna facilisis pulvinar.
Aenean at consequat neque! Suspendisse pellentesque eleifend fermentum. Cras nisi mauris, porttitor at
malesuada vitae; venenatis vel magna.
<br/>
<br/>
</div>
</div>
<div id="tabTwo" class="myTabs">
Tab Two Content
</div>
<div id="tabThree" class="myTabs">
Tab Three Content
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#tabsContainer').tabs();
});
</script>
</body>
</html>