jQuery插件仅适用于最后一个选择器

为了寻求更多的Javascript，我试图创建一个jQuery插件来创建自己的自定义滚动条。一次使用一个滚动条效果很好，但是如果我尝试做两个滚动条，那么最后一个滚动条就可以了。

JSFiddle：http : //jsfiddle.net/JoelCool/K4mW7/1/

我注意到HandleMouseMove（）函数的第一个滚动条上的变量“ scrolling”不正确，因此看起来可能是一个范围界定的事情？

HTML滚动条测试.scroller-bar {background-color：#ccc; border：1px纯黑色； float：left； position：relative； cursor：pointer; } .noSelect {user-select：none; -o-user-select：none; -moz-user-select：none; -khtml-user-select：none; -webkit-user-select：none; }

<div id="container" style="width:600px;height:300px;background-color:#ccc;overflow:hidden;position:relative;">
    <div id="content" style="background-color:blue;width:800px;height:283px;position:relative;left:0;">
        12345678901234567890123456789012345678901234567890
    </div>
    <div style="top:0;left:0;height:300px;width:100px;background-color:yellow;z-index:100;position:absolute;"></div>
    <div id="scroll-track-h" style="position:absolute;bottom:0;right:0;height:17px;width:500px;background-color:cyan;"></div>
    <div id="scroll-track-v" style="position:absolute;top:0;right:0;height:283px;width:17px;background-color:orange;"></div>
</div>
<br /><br />

<script src="jquery-2.1.0.min.js"></script>
<script src="scroller.js"></script>
<script>
    $('#scroll-track-v').scroller();
    $('#scroll-track-h').scroller();
    //$('#scroll-track-v, #scroll-track-h').scroller();
</script>

Java脚本

(function( $ ) {
    $.fn.scroller = function( options ) {

    options = $.extend( $.fn.scroller.defaults, options );

    // Plugin code
    return this.each(function () {
        var $elem = $(this),
            scrolling = false,
            mouseStartPos = 0,
            barPos = 0,
            xy = $elem.width() > $elem.height() ? 'x' : 'y',    // x = horizontal, y = vertical
            trackLength = xy == 'x' ? $elem.width() : $elem.height(),
            barLength = (trackLength * options.barPct / 100) - 2,   // should make it figure out the border width
            travelLength = trackLength - barLength - 2;
        console.log($elem);
        var $bar = $('<div class="scroller-bar"></div>')
                    .width( xy == 'x' ? barLength : $elem.innerWidth() - 2)
                    .height( xy == 'x' ? $elem.innerHeight() - 2 : barLength);
        $elem.append($bar);

        $elem.on('mousedown', function (evt) {
            scrolling = true;
            $("body").addClass("noSelect"); // turn off text selection while scrolling
            mouseStartPos = xy == 'x' ? evt.pageX : evt.pageY;
            barPos = xy == 'x' ? $bar.position().left : $bar.position().top;
            $(document).on('mousemove', function (evt) { HandleMouseMove(evt); });
        });

        $(document).on('mouseup', function (evt) {
            if (scrolling) {
                $("body").removeClass("noSelect");
                $(document).off('mousemove');
                mouseStartPos = 0;
                scrolling = false;
            }
        });

        HandleMouseMove = function (evt) {
            console.log(scrolling);
            if (scrolling) {
                var mouseMovedBy = xy == 'x' ? evt.pageX - mouseStartPos : evt.pageY - mouseStartPos,
                    newBarPos = barPos + mouseMovedBy;
                if (newBarPos < 0) { newBarPos = 0; }
                if (newBarPos > travelLength) { newBarPos = travelLength; }
                $bar.css(xy == 'x' ? 'left' : 'top', newBarPos);
                var pct = newBarPos / travelLength;
            }
        }
    });
}

// Set up the default options.
$.fn.scroller.defaults = {
    barPct : 25,
    onScroll : null
};
})( jQuery );

$('#scroll-track-v').scroller();
$('#scroll-track-h').scroller();

我先在垂直栏上称呼它，然后在水平和仅水平作品上称呼它。如果我切换它们，那么只有垂直工作。

谁能给我一个线索？我做错了吗？