我正在使用脚本Custom Content Scroller创建一个带有可自定义滚动条的滑动div。它几乎完美地满足了我的需求，并且当用户点击一个类别来隐藏它时，我编写了一个隐藏滚动区域内图像的功能。
这一切都很好，当某些图像滑出时，horWrapper div会调整较小的尺寸，以适应所包含的较少数量的图像。 然而，相反的情况并非如此。当图片滑入时，horWrapper不会调整大小，返回的图像会导致content容器内的换行。
查看http://manos.malihu.gr（滚动条插件的主页），$.fn.mCustomScrollbar.CustomScroller();应刷新滑块，它可能会刷新。但它不刷新horWrapper。我确定插件代码中有一些东西可以用来刷新horWrapper的宽度，但我看不出我是如何实现它的。非常感谢帮助！我已经在这几个小时里一直在努力。
HTML
<div class="box empty categories">
<h5>categories</h5>
<ul class="category">
<li id="devdes" class="cat-hider">category 1</li>
<li id="dev" class="cat-hider">category 2</li>
<li id="logo" class="cat-hider">category 3</li>
<li id="other" class="cat-hider">category 4</li>
</ul>
</div><!--box-->
<div id="mcs5_container">
<div class="customScrollBox">
<!-- horWrapper div is important for horizontal scrollers! -->
<div class="horWrapper">
<div class="container">
<div class="content">
<img class="folio t-dev" id="blah1" src="images/f-blah1.jpg" />
<img class="folio t-logo" id="blah2" src="images/f-blah2.jpg" />
<img class="folio t-devdes" id="blah3" src="images/f-blah3.jpg" />
<img class="folio t-dev" id="blacka" src="images/f-blacka.jpg" />
<img class="folio t-dev" id="blah4" src="images/f-blah4.jpg" />
<img class="folio t-dev" id="blah5" src="images/f-blah5.jpg" />
<img class="folio t-dev" id="blah6" src="images/f-blah6.jpg" />
<img class="folio t-logo" id="blah8" src="images/f-blah8" />
<img class="folio t-devdes" id="blah9" src="images/f-blah9.jpg" />
</div><!--content-->
</div><!--container-->
<div class="dragger_container">
<div class="dragger"></div>
</div><!--dragger container-->
</div><!--horwrapper-->
</div><!--customscrollbox-->
</div><!--mcs5_container-->
隐藏图片/类别的功能：
$('li.cat-hider').click(function(){
activeID = $(this).attr('id'),
$(this).toggleClass('hidethis');
$('img.t-' + activeID).slideToggle('slow', function(){
});
});
});
jquery插件
/* malihu custom scrollbar plugin - http://manos.malihu.gr */
(function ($) {
$.fn.mCustomScrollbar = function (scrollType,animSpeed,easeType,bottomSpace,draggerDimType,mouseWheelSupport,scrollBtnsSupport,scrollBtnsSpeed){
var id = $(this).attr("id");
var $customScrollBox=$("#"+id+" .customScrollBox");
var $customScrollBox_container=$("#"+id+" .customScrollBox .container");
var $customScrollBox_content=$("#"+id+" .customScrollBox .content");
var $dragger_container=$("#"+id+" .dragger_container");
var $dragger=$("#"+id+" .dragger");
var $scrollUpBtn=$("#"+id+" .scrollUpBtn");
var $scrollDownBtn=$("#"+id+" .scrollDownBtn");
var $customScrollBox_horWrapper=$("#"+id+" .customScrollBox .horWrapper");
//get & store minimum dragger height & width (defined in css)
if(!$customScrollBox.data("minDraggerHeight")){
$customScrollBox.data("minDraggerHeight",$dragger.height());
}
if(!$customScrollBox.data("minDraggerWidth")){
$customScrollBox.data("minDraggerWidth",$dragger.width());
}
//get & store original content height & width
if(!$customScrollBox.data("contentHeight")){
$customScrollBox.data("contentHeight",$customScrollBox_container.height());
}
if(!$customScrollBox.data("contentWidth")){
$customScrollBox.data("contentWidth",$customScrollBox_container.width());
}
//check for safari browser on mac os to lower mousewheel delta
var os=navigator.userAgent;
if (os.indexOf("Mac")!=-1 && os.indexOf("Safari")!=-1 && os.indexOf("AppleWebKit")!=-1 && os.indexOf("Chrome")==-1){
var mousewheelDelta=1;
} else {
var mousewheelDelta=10;
}
CustomScroller();
function CustomScroller(reloadType){
//horizontal scrolling ------------------------------
if(scrollType=="horizontal"){
var visibleWidth=$customScrollBox.width();
//set content width automatically
$customScrollBox_horWrapper.css("width",999999); //set a rediculously high width value ;)
$customScrollBox.data("totalContent",$customScrollBox_container.width()); //get inline div width
$customScrollBox_horWrapper.css("width",$customScrollBox.data("totalContent")); //set back the proper content width value
if($customScrollBox_container.width()>visibleWidth){ //enable scrollbar if content is long
$dragger.css("display","block");
if(reloadType!="resize" && $customScrollBox_container.width()!=$customScrollBox.data("contentWidth")){
$dragger.css("left",0);
$customScrollBox_container.css("left",0);
$customScrollBox.data("contentWidth",$customScrollBox_container.width());
}
$dragger_container.css("display","block");
$scrollDownBtn.css("display","inline-block");
$scrollUpBtn.css("display","inline-block");
var totalContent=$customScrollBox_content.width();
var minDraggerWidth=$customScrollBox.data("minDraggerWidth");
var draggerContainerWidth=$dragger_container.width();
function AdjustDraggerWidth(){
if(draggerDimType=="auto"){
var adjDraggerWidth=Math.round(totalContent-((totalContent-visibleWidth)*1.3)); //adjust dragger width analogous to content
if(adjDraggerWidth<=minDraggerWidth){ //minimum dragger width
$dragger.css("width",minDraggerWidth+"px");
} else if(adjDraggerWidth>=draggerContainerWidth){
$dragger.css("width",draggerContainerWidth-10+"px");
} else {
$dragger.css("width",adjDraggerWidth+"px");
}
}
}
AdjustDraggerWidth();
var targX=0;
var draggerWidth=$dragger.width();
$dragger.draggable({
axis: "x",
containment: "parent",
drag: function(event, ui) {
ScrollX();
},
stop: function(event, ui) {
DraggerRelease();
}
});
$dragger_container.click(function(e) {
var $this=$(this);
var mouseCoord=(e.pageX - $this.offset().left);
if(mouseCoord<$dragger.position().left || mouseCoord>($dragger.position().left+$dragger.width())){
var targetPos=mouseCoord+$dragger.width();
if(targetPos<$dragger_container.width()){
$dragger.css("left",mouseCoord);
ScrollX();
} else {
$dragger.css("left",$dragger_container.width()-$dragger.width());
ScrollX();
}
}
});
//mousewheel
$(function($) {
if(mouseWheelSupport=="yes"){
$customScrollBox.unbind("mousewheel");
$customScrollBox.bind("mousewheel", function(event, delta) {
var vel = Math.abs(delta*mousewheelDelta);
$dragger.css("left", $dragger.position().left-(delta*vel));
ScrollX();
if($dragger.position().left<0){
$dragger.css("left", 0);
$customScrollBox_container.stop();
ScrollX();
}
if($dragger.position().left>$dragger_container.width()-$dragger.width()){
$dragger.css("left", $dragger_container.width()-$dragger.width());
$customScrollBox_container.stop();
ScrollX();
}
return false;
});
}
});
//scroll buttons
if(scrollBtnsSupport=="yes"){
$scrollDownBtn.mouseup(function(){
BtnsScrollXStop();
}).mousedown(function(){
BtnsScrollX("down");
});
$scrollUpBtn.mouseup(function(){
BtnsScrollXStop();
}).mousedown(function(){
BtnsScrollX("up");
});
$scrollDownBtn.click(function(e) {
e.preventDefault();
});
$scrollUpBtn.click(function(e) {
e.preventDefault();
});
btnsScrollTimerX=0;
function BtnsScrollX(dir){
if(dir=="down"){
var btnsScrollTo=$dragger_container.width()-$dragger.width();
var scrollSpeed=Math.abs($dragger.position().left-btnsScrollTo)*(100/scrollBtnsSpeed);
$dragger.stop().animate({left: btnsScrollTo}, scrollSpeed,"linear");
} else {
var btnsScrollTo=0;
var scrollSpeed=Math.abs($dragger.position().left-btnsScrollTo)*(100/scrollBtnsSpeed);
$dragger.stop().animate({left: -btnsScrollTo}, scrollSpeed,"linear");
}
clearInterval(btnsScrollTimerX);
btnsScrollTimerX = setInterval( ScrollX, 20);
}
function BtnsScrollXStop(){
clearInterval(btnsScrollTimerX);
$dragger.stop();
}
}
//scroll
var scrollAmount=(totalContent-visibleWidth)/(draggerContainerWidth-draggerWidth);
function ScrollX(){
var draggerX=$dragger.position().left;
var targX=-draggerX*scrollAmount;
var thePos=$customScrollBox_container.position().left-targX;
$customScrollBox_container.stop().animate({left: "-="+thePos}, animSpeed, easeType);
}
} else { //disable scrollbar if content is short
$dragger.css("left",0).css("display","none"); //reset content scroll
$customScrollBox_container.css("left",0);
$dragger_container.css("display","none");
$scrollDownBtn.css("display","none");
$scrollUpBtn.css("display","none");
}
//vertical scrolling ------------------------------
} else {
var visibleHeight=$customScrollBox.height();
if($customScrollBox_container.height()>visibleHeight){ //enable scrollbar if content is long
$dragger.css("display","block");
if(reloadType!="resize" && $customScrollBox_container.height()!=$customScrollBox.data("contentHeight")){
$dragger.css("top",0);
$customScrollBox_container.css("top",0);
$customScrollBox.data("contentHeight",$customScrollBox_container.height());
}
$dragger_container.css("display","block");
$scrollDownBtn.css("display","inline-block");
$scrollUpBtn.css("display","inline-block");
var totalContent=$customScrollBox_content.height();
var minDraggerHeight=$customScrollBox.data("minDraggerHeight");
var draggerContainerHeight=$dragger_container.height();
function AdjustDraggerHeight(){
if(draggerDimType=="auto"){
var adjDraggerHeight=Math.round(totalContent-((totalContent-visibleHeight)*1.3)); //adjust dragger height analogous to content
if(adjDraggerHeight<=minDraggerHeight){ //minimum dragger height
$dragger.css("height",minDraggerHeight+"px").css("line-height",minDraggerHeight+"px");
} else if(adjDraggerHeight>=draggerContainerHeight){
$dragger.css("height",draggerContainerHeight-10+"px").css("line-height",draggerContainerHeight-10+"px");
} else {
$dragger.css("height",adjDraggerHeight+"px").css("line-height",adjDraggerHeight+"px");
}
}
}
AdjustDraggerHeight();
var targY=0;
var draggerHeight=$dragger.height();
$dragger.draggable({
axis: "y",
containment: "parent",
drag: function(event, ui) {
Scroll();
},
stop: function(event, ui) {
DraggerRelease();
}
});
$dragger_container.click(function(e) {
var $this=$(this);
var mouseCoord=(e.pageY - $this.offset().top);
if(mouseCoord<$dragger.position().top || mouseCoord>($dragger.position().top+$dragger.height())){
var targetPos=mouseCoord+$dragger.height();
if(targetPos<$dragger_container.height()){
$dragger.css("top",mouseCoord);
Scroll();
} else {
$dragger.css("top",$dragger_container.height()-$dragger.height());
Scroll();
}
}
});
//mousewheel
$(function($) {
if(mouseWheelSupport=="yes"){
$customScrollBox.unbind("mousewheel");
$customScrollBox.bind("mousewheel", function(event, delta) {
var vel = Math.abs(delta*mousewheelDelta);
$dragger.css("top", $dragger.position().top-(delta*vel));
Scroll();
if($dragger.position().top<0){
$dragger.css("top", 0);
$customScrollBox_container.stop();
Scroll();
}
if($dragger.position().top>$dragger_container.height()-$dragger.height()){
$dragger.css("top", $dragger_container.height()-$dragger.height());
$customScrollBox_container.stop();
Scroll();
}
return false;
});
}
});
//scroll buttons
if(scrollBtnsSupport=="yes"){
$scrollDownBtn.mouseup(function(){
BtnsScrollStop();
}).mousedown(function(){
BtnsScroll("down");
});
$scrollUpBtn.mouseup(function(){
BtnsScrollStop();
}).mousedown(function(){
BtnsScroll("up");
});
$scrollDownBtn.click(function(e) {
e.preventDefault();
});
$scrollUpBtn.click(function(e) {
e.preventDefault();
});
btnsScrollTimer=0;
function BtnsScroll(dir){
if(dir=="down"){
var btnsScrollTo=$dragger_container.height()-$dragger.height();
var scrollSpeed=Math.abs($dragger.position().top-btnsScrollTo)*(100/scrollBtnsSpeed);
$dragger.stop().animate({top: btnsScrollTo}, scrollSpeed,"linear");
} else {
var btnsScrollTo=0;
var scrollSpeed=Math.abs($dragger.position().top-btnsScrollTo)*(100/scrollBtnsSpeed);
$dragger.stop().animate({top: -btnsScrollTo}, scrollSpeed,"linear");
}
clearInterval(btnsScrollTimer);
btnsScrollTimer = setInterval( Scroll, 20);
}
function BtnsScrollStop(){
clearInterval(btnsScrollTimer);
$dragger.stop();
}
}
//scroll
if(bottomSpace<1){
bottomSpace=1; //minimum bottomSpace value is 1
}
var scrollAmount=(totalContent-(visibleHeight/bottomSpace))/(draggerContainerHeight-draggerHeight);
function Scroll(){
var draggerY=$dragger.position().top;
var targY=-draggerY*scrollAmount;
var thePos=$customScrollBox_container.position().top-targY;
$customScrollBox_container.stop().animate({top: "-="+thePos}, animSpeed, easeType);
}
} else { //disable scrollbar if content is short
$dragger.css("top",0).css("display","none"); //reset content scroll
$customScrollBox_container.css("top",0);
$dragger_container.css("display","none");
$scrollDownBtn.css("display","none");
$scrollUpBtn.css("display","none");
}
}
$dragger.mouseup(function(){
DraggerRelease();
}).mousedown(function(){
DraggerPress();
});
function DraggerPress(){
$dragger.addClass("dragger_pressed");
}
function DraggerRelease(){
$dragger.removeClass("dragger_pressed");
}
}
$(window).resize(function() {
if(scrollType=="horizontal"){
if($dragger.position().left>$dragger_container.width()-$dragger.width()){
$dragger.css("left", $dragger_container.width()-$dragger.width());
}
} else {
if($dragger.position().top>$dragger_container.height()-$dragger.height()){
$dragger.css("top", $dragger_container.height()-$dragger.height());
}
}
CustomScroller("resize");
});
};
})(jQuery);
答案 0 :(得分：1)
我最终得到了这个。令人恼火的是，在listed的众多评论中，这个问题的答案是original blog post。
[2012年12月编辑]：对于遇到同样问题且无法以任何理由得到上述评论/解决方案的其他人，此处是网站所有者/脚本开发人员提供的解决方案：
Firstly, get the plugin file: http://manos.malihu.gr/tuts/jquery.ba-resize.min.js and put it in the directory of your document. In the head of your document, before the closing head tag add: <script src="jquery.ba-resize.min.js"></script> At the bottom script, below your LoadNewContent function add: $(".content").resize(function(e){ $("#mcs5_container").mCustomScrollbar("horizontal",400,"easeOutCirc",1,"fixed","yes","yes",20); });
With this, you can remove the other callback functions calls of mCustomScrollbar.