I have done some testing, and have found that MouseDown does fire, but MouseUp does not when the scroll bar is used. Don't know if this is a bug in Jquery/Javascript or by design so need to find a work around. The best option i came up with is to disable the autoscroll on a MouseDown, but then renable autoscroll when the mouse leaves by capturing the mouseout and/or mouseleave events.
The code below is what i used for testing, although it is not the ideal solution, it is a working working around.
The top text area is an ever growing text area using a continuous timer. the bottom text area is used just to show what events are being fired.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var line = 1;
var allowAutoScroll = true;
$(document).ready(function () {
$("#textBlock").mouseenter(function () {
$("#textLog").val($("#textLog").val() + "Mouse Enter.\n");
textLog.scrollTop = textLog.scrollHeight;
});
$("#textBlock").mousedown(function () {
$("#textLog").val($("#textLog").val() + "Mouse Down.\n");
textLog.scrollTop = textLog.scrollHeight;
allowAutoScroll = false;
});
$("#textBlock").mouseup(function () {
$("#textLog").val($("#textLog").val() + "Mouse Up.\n");
textLog.scrollTop = textLog.scrollHeight;
});
$("#textBlock").mouseout(function () {
$("#textLog").val($("#textLog").val() + "Mouse Out.\n");
textLog.scrollTop = textLog.scrollHeight;
allowAutoScroll = true;
});
$("#textBlock").mouseleave(function () {
$("#textLog").val($("#textLog").val() + "Mouse Leave.\n");
textLog.scrollTop = textLog.scrollHeight;
allowAutoScroll = true;
});
$("#textBlock").scroll(function () {
$("#textLog").val($("#textLog").val() + "Scroll.\n");
textLog.scrollTop = textLog.scrollHeight;
});
setTimeout(timerTick, 1000);
});
function timerTick() {
$("#textBlock").append("Timer Event " + line.toString() + "\n");
setTimeout(timerTick, 1000);
line++;
if (allowAutoScroll) {
textBlock.scrollTop = textBlock.scrollHeight;
}
}
</script>
</head>
<body>
<p>
Below is a long text box.<br />
<textarea rows="5" cols="50" id="textBlock">This is the text block across
lots of lines
</textarea>
</p>
<p>
Below is the events fired log.<br />
<textarea rows="5" cols="50" id="textLog">Events
</textarea>
</p>
</body>
</html>