1

我遇到了 jQuery 的 scrollto/localscroll 插件的问题。这些插件默认工作，但如果我淡入/淡出某些容器，那么它会以某种方式导致网页上的所有滚动条消失。

这是我的代码的结构：

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>

当我第一次导航到其中一个页面时，滚动效果很好。例如：

  • 我转到第 1 页，由于 .pagecontainer 已将溢出设置为自动滚动条出现（内容部分中的文本超过 450px 高度）
  • 我单击“page1b”的链接
  • 该插件将为滚动设置动画并向下滚动到 page1b 的开头
  • 然后我点击page2的链接
  • 突然滚动条不再出现，但如果我点击链接“page2b”，它仍然会滚动，但只是没有可见的滚动条
  • 我转到我网站的其他页面（为简单起见，此处未显示），这些页面的滚动条也消失了。如果我刷新页面，它只会自行修复

这是 jQuery.localscroll 的网页（以及滚动到的链接，我认为它们很相似）：http ://flesler.blogspot.ca/2007/10/jquerylocalscroll-10.html

有谁知道可能导致此问题的原因是什么？谢谢。

4

0 回答 0