从功能上动态调整容器宽度

Question

我使用脚本自定义内容滚筒创建一个带有可定制滚动条的滑动div。它几乎完美地满足了我的需要，当用户单击一个类别来隐藏它时，我已经编写了一个函数来隐藏滚动区域内的图像。

这一切都很好，当一些图像滑出时，horWrapper div调整大小以适应所包含的图像的较少数量。然而，不是正确的。当图像滑动时，horWrapper不会调整大小，返回的图像会导致在content容器中包装。

看看http://manos.malihu.gr (滚动条插件的家)，$.fn.mCustomScrollbar.CustomScroller();应该刷新滑块，而且它可能会刷新。但是它不会刷新horWrapper。我确信插件代码中有一些东西可以用来刷新horWrapper的宽度，但我不知道如何实现它。我们将非常感谢您的帮助！我已经挣扎了好几个小时了。

<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);

Answer 1

我终于让这件事成功了。令人恼火的是，这个问题的答案是挂牌在原创博文的众多评论中。

2012年12月编辑:对于因任何原因而无法找到上述评论/解决方案的其他有相同问题的人，以下是站点所有者/脚本开发人员提供的解决方案：

首先，获取插件文件：http://manos.malihu.gr/tuts/jquery.ba-resize.min.js并将其放在文档的目录中。在文档的开头，在结束标题标记之前添加:在底部脚本中，在LoadNewContent函数下面添加：$(“.content”).resize(函数(E){.content "easeOutCirc",1，“固定”，“是”，“是”，20)；}；

With this, you can remove the other callback functions calls of mCustomScrollbar.