I am trying to design a custom scrollbar, I was able to do it only when mouse moves slow, If mouse moves fast the 'bar' gets out of the scroll Region. Here is my fiddle: http://jsfiddle.net/ghufranne/ydz2hpm0/22/
我正在尝试设计一个自定义滚动条,我只能在鼠标移动缓慢的情况下才能执行此操作。如果鼠标快速移动,“条形图”将离开滚动区域。这是我的小提琴: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--;
}
};
});
If I had used Draggable working, It would work fine. But I don't want to use it, I want to learn it.
如果我使用Draggable工作,它会工作正常。但我不想使用它,我想学习它。