只在最后一个选择器上工作的jQuery插件

Question

为了学习更多的Javascript，我尝试创建一个jQuery插件来创建我自己的自定义滚动条。它一次只能运行一个滚动条，但是如果我试着做其中的两个，最后一个就能工作了。

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

我注意到，在HandleMouseMove()函数的第一个滚动条上，变量“滚动”不是真，所以它似乎是一个作用域问题？

HTML滚动条测试。滚动条{背景色：#ccc；边框:1px实心black;float:left;position:relative;cursor:pointer；} .noSelect {用户选择:无；-o-用户-选择:无；-moz-用户-选择:无；-khtml-用户-选择:无；-webkit-用户-选择:无；}

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

​

Javascript

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

我先在垂直条上叫它，然后是水平的，然后才是水平的。如果我转换它们，那么只有垂直工作。

有人能给我个线索吗？我做错了吗？

Answer 1

函数HandleMouseMove()没有绑定到元素。它得到了“滚动”布尔值的混合值。

我刚加了$elem。函数名之前。并将其命名为$elem.HandleMouseMove(事件)；

检查代码

(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) { $elem.HandleMouseMove(evt); });
        });

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

        $elem.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();

查看更新的jsfiddle http://jsfiddle.net/shinde87sagar/K4mW7/3/

Answer 2

我已经更新了您的代码以使用数据对象。当您在一个插件中处理多个DOM元素时，您应该显式地声明您所引用的对象。将它们保持在全局状态，就像您所做的那样，使得mousemove和mouseup事件无法知道引用哪个元素。这种方式更简洁，您只需担心每个事件处理程序中的作用域。

编辑:这还没有移动内容窗格，但这应该给您一个如何正确进行的想法。

kush/K4mW7/2/

$.fn.scroller = function( options ) {

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

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

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

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

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

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

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