在jQuery中鼠标按下时如何滚动div？

我想要完成的是，只在鼠标按钮按下时滚动红色条中的指示器（见图）

这是我的jQuery代码：

var offset = 0;
var mouseDown = false;

$(document).ready(function() {
    $("#RedScroller").mousedown(function() {
        mouseDown = true;
    });

    $("#RedScroller").mouseup(function() {
        mouseDown = false;
    });

    while (mouseDown == true)
    {
        $("#RedSlider").mousemove(function(e) {
            var offset = $(this).offset(); 
            offset = e.pageX - offset.left;
            if (offset <= 255 && offset >= 0)
            {
                $("#RedScroller").css("left", offset);
                $("#ColorDisplay").text(offset);
            }

        });
    }
});

var offset=0；
var mouseDown=false；
$（文档）.ready（函数（）{
$（“#红色滚动条”）.mousedown（函数（）{
mouseDown=true；
});
$（“#红色卷轴”）.mouseup（函数（）{
mouseDown=false；
});
while（mouseDown==true）
{
$（“#红色滑块”）.mousemove（函数（e）{
var offset=$（this.offset（）；
偏移量=e.pageX-offset.left；
如果（偏移量=0）
{
$（“#红色滚动条”）.css（“左”，偏移量）；
$（“#彩色显示”）。文本（偏移量）；
}
});
}
});

但滑块只是保持静止。 我怎样才能做到这一点

---

Fiddle:

问题在于，while循环将在DomReady上执行一次，而不是每次鼠标按需要向下移动时执行

$("#RedScroller").mousedown(function() {
    mouseDown = true;
});

$("#RedScroller").mouseup(function() {
     mouseDown = false;
});

$("#RedSlider").mousemove(function(e) {
    if(mouseDown == true) {
        var offset = $(this).offset(); 
        offset = e.pageX - offset.left;
        if (offset <= 255 && offset >= 0)
        {
            $("#RedScroller").css("left", offset);
            $("#ColorDisplay").text(offset);
        }
    }
});

$（“#红色滚动条”）.mousedown（函数（）{
mouseDown=true；
});
$（“#红色卷轴”）.mouseup（函数（）{
mouseDown=false；
});
$（“#红色滑块”）.mousemove（函数（e）{
if（mouseDown==true）{
var offset=$（this.offset（）；
偏移量=e.pageX-offset.left；
如果（偏移量=0）
{
$（“#红色滚动条”）.css（“左”，偏移量）；
$（“#彩色显示”）。文本（偏移量）；
}
}
});

---

演示：

你能添加JSFIDLE吗？当文档准备好时，while只会触发一次，你需要将其放入函数中，或者将其绑定到鼠标下键或其他东西上。与其使用while循环，不如使用MouseMove事件并检查鼠标是否下键。谢谢你，不知道我为什么没有看到这个。。。其实很简单！