jQuery の scrollto/localscroll プラグインで問題が発生しました。これらのプラグインはデフォルトで機能しますが、一部のコンテナをフェードイン/アウトすると、何らかの理由で Web ページのすべてのスクロールバーが消えてしまいます。
これは私のコードの構造です:
CSS:
.pagecontainer {
overflow-y:auto;
overflow-x:hidden;
width:80%;
height:450px;
margin: 0 auto;
}
.pagecontainer>div{
display: none;
position:relative;
}
JS:
<!--fade and show windows-->
<script type="text/javascript">
$(document).ready(function() {
$('.link').on('click', function(e){
displayNone();
$(this.getAttribute("href")).fadeIn();
}
function displayNone() {
$('.pagecontainer>div').fadeOut(0);
}
});
</script>
<!--Scroll window for anchor links-->
<script type="text/javascript">
$(document).ready(function() {
$('.enablescroll').localScroll({
target:'.pagecontainer', /*scroll within this parent div*/
duration:500
});
});
</script>
HTML:
<div class="pagecontainer">
<div id="page1">
<div class="sidelinks enablescroll">
<a href="#main">Back to main</a>
<p>
<a href="#page1a">Page 1 A</a>
<p>
<a href="#page1b">Page 1 B</a>
<p>
</div>
<div class="content">
<div id="page1a">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vestibulum arcu vitae sodales. Nunc quam velit, tempus a vestibulum in, scelerisque in ipsum. Nam pretium imperdiet elementum. Nam nec sem magna, ut tempus augue. Donec vitae ipsum elit. Phasellus imperdiet arcu nec libero elementum eget volutpat purus dictum. Quisque congue porta sapien, vitae laoreet eros volutpat nec. Mauris sed leo nec justo molestie cursus ut vitae ipsum. Vestibulum ante odio, egestas elementum ullamcorper sit amet, tristique in lorem.
</div>
<div id="page1b">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vestibulum arcu vitae sodales. Nunc quam velit, tempus a vestibulum in, scelerisque in ipsum. Nam pretium imperdiet elementum. Nam nec sem magna, ut tempus augue. Donec vitae ipsum elit. Phasellus imperdiet arcu nec libero elementum eget volutpat purus dictum. Quisque congue porta sapien, vitae laoreet eros volutpat nec. Mauris sed leo nec justo molestie cursus ut vitae ipsum. Vestibulum ante odio, egestas elementum ullamcorper sit amet, tristique in lorem.
</div>
</div>
<br>
<br>
<br>
</div>
<div id="page2">
<div class="sidelinks enablescroll">
<a href="#main">Back to main</a>
<p>
<a href="#page2a">Page 2 A</a>
<p>
<a href="#page2b">Page 2 B</a>
<p>
</div>
<div class="content">
<div id="page2a">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vestibulum arcu vitae sodales. Nunc quam velit, tempus a vestibulum in, scelerisque in ipsum. Nam pretium imperdiet elementum. Nam nec sem magna, ut tempus augue. Donec vitae ipsum elit. Phasellus imperdiet arcu nec libero elementum eget volutpat purus dictum. Quisque congue porta sapien, vitae laoreet eros volutpat nec. Mauris sed leo nec justo molestie cursus ut vitae ipsum. Vestibulum ante odio, egestas elementum ullamcorper sit amet, tristique in lorem.
</div>
<div id="page2b">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vestibulum arcu vitae sodales. Nunc quam velit, tempus a vestibulum in, scelerisque in ipsum. Nam pretium imperdiet elementum. Nam nec sem magna, ut tempus augue. Donec vitae ipsum elit. Phasellus imperdiet arcu nec libero elementum eget volutpat purus dictum. Quisque congue porta sapien, vitae laoreet eros volutpat nec. Mauris sed leo nec justo molestie cursus ut vitae ipsum. Vestibulum ante odio, egestas elementum ullamcorper sit amet, tristique in lorem.
</div>
</div>
<br>
<br>
<br>
</div>
</div>
最初にいずれかのページに移動すると、スクロールは正常に機能します。例えば：
- page1 に移動すると、.pagecontainer のオーバーフローが auto に設定されているため、スクロールバーが表示されます (コンテンツ セクションのテキストの高さが 450px を超えています)。
- 「page1b」のリンクをクリックします
- プラグインはスクロールをアニメーション化し、page1b の先頭までスクロールします。
- 次に、ページ 2 のリンクをクリックします。
- 突然スクロールバーが表示されなくなりましたが、リンク「page2b」をクリックすると、スクロールバーは表示されませんが、スクロールバーは表示されません。
- 私は自分のウェブサイトの他のページに移動します (簡単にするためにここには表示されていません)。それらのページのスクロールバーも消えています。ページを更新した場合にのみ修正されます
これは jQuery.localscroll の Web ページです (scrollto へのリンクも同様です): http://flesler.blogspot.ca/2007/10/jquerylocalscroll-10.html
この問題の原因は何か考えている人はいますか? ありがとう。