Question

我遇到了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溢出设置为auto，滚动条出现（内容部分中的文本超过450px高度）
点击“page1b”链接
该插件将为滚动设置动画并向下滚动到page1b
然后我点击第2页的链接
突然滚动条不再显示了，但是如果我点击链接“page2b”那么它仍会滚动，但只是没有可见的滚动条
我转到我网站的其他页面（为简单起见，此处未显示），这些页面的滚动条也消失了。它只在我刷新页面时自行修复

这是jQuery.localscroll的网页（以及指向scrollto的链接，我认为它们类似）：http://flesler.blogspot.ca/2007/10/jquerylocalscroll-10.html

有没有人知道可能导致此问题的原因？感谢。

jQuery scrollto / localscroll - 导致滚动条消失

0 个答案: