我正在尝试设计一个自定义滚动条,只有当鼠标移动缓慢时我才能做到这一点,如果鼠标移动很快,“条”就会离开滚动区域。 这是我的 fiddle : http://jsfiddle.net/ghufranne/ydz2hpm0/22/
var $body = $('body');
var $target = null;
var isDraggEnabled = false;
var posY=0;
$body.on("mousedown", "#bar", function(e) {
$this = $(this);
if(e.offsetX==undefined){
y = e.pageY-$(this).offset().top;
}else{
y = e.offsetY;
};
$('#scrollRegion').offset({
top:currTop+y});
$target = $(e.target);
e.preventDefault();
});
$body.on("mouseup", function(e) {
$target = null;
});
var bottomScrollLock=false;
var topScrollLock=false;
$body.find("#scroll").on("mousemove", function(e) {
if ($target) {
var pos= $target.offset();
if(bottomScrollLock && e.pageY<posY){
bottomScrollLock=false;
}
if(topScrollLock && e.pageY>posY){
topScrollLock=false;
}
if(pos.top<scrollPos.top )
{
posY=e.pageY;
topScrollLock=true;
}
if((pos.top+heightOfBar-scrollHeight)> scrollPos.top){
posY=e.pageY;
bottomScrollLock=true;
}
noOfElToScroll = parseInt(pos.top-e.pageY+y);
$("#drag").text(noOfElToScroll);
if(!bottomScrollLock && noOfElToScroll<0 ){
$target.offset({
top: e.pageY -y
});
for(var i=0;i<1;i++){
$drop.find('li:last').after("<li>value "+(lastVisible++)+"</li>");
$drop.find('li:first').remove();
firstVisible++;}
}
if(noOfElToScroll>0 &&!topScrollLock){
$target.offset({
top: e.pageY -y
});
$("#drag").text($('#bar').offset().top);
$drop.find('li:first').before("<li>value "+(firstVisible--)+"</li>");
$drop('li:last').remove();
lastVisible--;
}
};
});
如果我使用 Draggable 工作,它会工作得很好。 但是我不想用,我想学。
最佳答案
看first 和 second chart .该因素称为 Jquery
关于javascript - 当鼠标快速移动时,在 JQUERY 中自定义拖动 div 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26134652/