Response title
This is preview!
I encountered a problem with jQuery's scrollto/localscroll plugin. These plugins work by default, but if I fade in/out some containers then it somehow causes all scrollbars on the webpage to disappear.
This is the structure of my code:
.pagecontainer {
overflow-y:auto;
overflow-x:hidden;
width:80%;
height:450px;
margin: 0 auto;
}
.pagecontainer>div{
display: none;
position:relative;
}
<!--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>
<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>
This is the webpage for jQuery.localscroll (as well as links to scrollto, they're similar I think): http://flesler.blogspot.ca/2007/10/jquerylocalscroll-10.html
Does anyone have an idea what might be causing this problem? Thanks.
© 2013 jQuery Foundation
Sponsored by and others.