Question

我正在使用jScrollPane实现水平图像滑块，并尝试使用 horizontalDragMinWidth 设置为拖动手柄（.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确实被初始化两次（第448行到jScrollPane.js第453行运行两次）。在第二次初始化时，没有将horizontalDragMinWidth指定为设置的一部分，因此horizontalDragMinWidth默认为0。我的预感是这就是问题所在。

调整jScrollPane中的拖动句柄大小

1 个答案: