jScrollPane의 드래그 핸들 크기 조정

Question

jScrollPane을 사용하여 가로 이미지 슬라이더를 구현하고 horizontalDragMinWidth 설정을 사용하여 드래그 핸들 (.jspDrag)의 최소 폭을 63으로 설정하려고합니다.

불행히도 그것은 제대로 작동하지 않으며 나는 그 이유를 모른다. 나는 정말로 도움이된다.

문제는 http://tmcdomains.com/jScrollPane/static.html에서 볼 수 있습니다. 두 번 JScrollPane의 초기화하는 이유

이

<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

내가 확실히 이해 해달라고 :

처음 :

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

초

다음 스크립트는 바로 태그를, 내 바닥 글에 시간 :

$(this).jScrollPane(); 

하지만 디버깅을 마친 후. jScrollPane가 두 번 초기화되었습니다 (jScrollPane.js의 448 행에서 453 행까지 두 번 실행 됨). 두 번째로 초기화 될 때 horizontalDragMinWidth이 설정의 일부로 지정되지 않으므로 horizontalDragMinWidth는 기본적으로 0입니다. 나의 직감은 이것이 문제라는 것이다.