jScrollPaneのドラッグハンドルのサイズ変更

Question

jScrollPaneを使用して水平イメージスライダーを実装していて、horizo​​ntalDragMinWidth設定を使用してドラッグハンドル（.jspDrag）の最小幅を63に設定しようとしています。

残念ながら、それはうまく機能していないので、なぜ私には分かりません。私は本当にいくつかの助けに感謝します。

問題はhttp://tmcdomains.com/jScrollPane/static.htmlで表示できます。

次のスクリプトは、単にタグの上に、私のフッターにある：

<script type="text/javascript"> 
$(function() { 
$("img").wrap('<div class="item" />'); 
var $conveyor = $("#conveyor"); 
var $item = $(".item", $conveyor); 
var $viewer = $("#viewer"); 
var api = $viewer.bind("jsp-scroll-x").jScrollPane({animateScroll: true,horizontalDragMinWidth: 63}).data("jsp"); 

var imagesWidth = 0; 
$($item).each(function (index, image) { 
    var $image = $(image); 
    imagesWidth += $image.outerWidth() + parseInt($item.css("margin-right"), 10); 
}); 
$($conveyor).width(imagesWidth); 

function scrollByItem(direction) { 
    var xPos = api.getContentPositionX(); 
    var viewerHalfWidth = $viewer.width()/2; 
    var pixels = 0; 
    $($item).each(function (i) { 
     pixels += $(this).outerWidth(true); 
     if (pixels >= (xPos + viewerHalfWidth)) { 
      if (direction == "right" && $item[i + 1]) { 
       api.scrollToX(($($item[i + 1]).outerWidth(true)/2) + pixels - viewerHalfWidth, true); 
      } else { 
       if (direction == "left" && $item[i - 1]) { 
        api.scrollToX(pixels - $(this).outerWidth(true) - viewerHalfWidth - ($($item[i - 1]).outerWidth(true)/2), true); 
       } 
      } 
      return false; 
     } 
    }); 
    return false; 
} 
$("#prev").click(function() { 
    scrollByItem("left"); 
}); 
$("#next").click(function() { 
    scrollByItem("right"); 
}); 

$viewer.each(
    function() 
    { 
     $(this).jScrollPane(); 
     var api = $(this).data('jsp'); 
     var throttleTimeout; 
     $(window).bind(
      'resize', 
      function() 
      { 
       if ($.browser.msie) { 
        // IE fires multiple resize events while you are dragging the browser window which 
        // causes it to crash if you try to update the scrollpane on every one. So we need 
        // to throttle it to fire a maximum of once every 50 milliseconds... 
        if (!throttleTimeout) { 
         throttleTimeout = setTimeout(
          function() 
          { 
           api.reinitialise(); 
           throttleTimeout = null; 
          }, 
          50 
         ); 
        } 
       } else { 
        api.reinitialise(); 
       } 
      } 
     ); 
    } 
);  

}); 
</script> 

Answer 1

私はあなたが二回にJScrollPaneを初期化している理由は非常に理解しない：

初めて：

var api = $viewer.bind("jsp-scroll-x").jScrollPane({animateScroll: true,horizontalDragMinWidth: 63}).data("jsp"); 

秒時間：

$(this).jScrollPane(); 

しかし、私はそれをデバッグした。 jScrollPaneが2回初期化されました（jScrollPane.jsの448行目から453行目を2回実行）。 2度目の初期化時には、horizontalDragMinWidthが設定の一部として指定されていないため、horizo​​ntalDragMinWidthはデフォルトで0です。私の勘違いは、これが問題だということです。