Ich brauche ein benutzerdefiniertes Bildlaufleisten-Plugin für ein persönliches Projekt (mit "benutzerdefiniert" meine ich grundlegende Trägheitseffekte, benutzerdefinierte Bilder und so weiter). Meine Wahl war mCustomScrollbar.Versteckte Bildlaufleiste außer Seitengröße
Die Dokumentation war in der Tat sehr klar, und ich hatte keine Probleme, das Skript zu implementieren, aber es scheint nur zu funktionieren, wenn ich die Seite skalieren, als ob Scrollen nicht benötigt wird.
In der Tat hat die Bildlaufleiste style="display: hidden" auf einer voll geladenen Seite, wie in diesem question (aber ich konnte keine sinnvollen Antworten finden).
Ich glaube, es gibt einige height Thema verknüpft mit slidesjs (die ich auch mit), aber ich kann es einfach nicht finden ... hier einige Code:
(There's die ganze Seite, so dass Sie den Code mit Firebug anzeigen können ... nur unter "Pulcini" gehen, um den langen Inhalt)
<head>
<!-- everything is included -->
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href="css/jquery.mCustomScrollbar.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jquery.mCustomScrollbar.js"></script>
<script>
$(function(){
$("#slides").slides({
generatePagination: false,
pagination: true,
paginationClass: 'pagination'
});
});
</script>
<script>
(function($){
$(window).load(function(){
$("#slide2").mCustomScrollbar();
});
})(jQuery);
</script>
</head>
<body>
<div id="slides">
<!-- other stuff -->
<div class="slides_container">
<div id="slide1">
<h2>Uova</h2>
<p>Text1...</p>
</div>
<!-- slide2 is the scrollbar div -->
<div id="slide2">
<h2>Blabla</h2>
<p>Lorem ipsum</p><br />
</div>
</div>
</div>
</body>
CSS anzuzeigen:
div#slides {
height: 506px;
}
.slides_container {
width: 900px;
height: 506px;
}
.slides_container, div#slide1, div#slide2, div#slide3, {
width: 808px;
height: 366px;
display: block;
float: left;
overflow-y: auto;
}
.slides_container {
margin-top: 30px;
margin-bottom: 30px;
height: 366px;
}
Hat super funktioniert. Danke für die Antwort :) – trascendency
Dies ist bei weitem die beste Lösung, die ich gesehen habe. Die Option, die dieses Problem für mich behebt, war: 'advanced: {updateOnContentResize: true}' –