How to fadeout on mouseout, when mouse is clicked and dragged and then out?

Question

I'm using jQuery to fadein and fadeout the tinyScrollBar when the user mouseenters or mouseleaves the scrollable area.

The problem I have is if the user clicks and drags on the scrollbar handle, and releases their mouse anywhere other than on the scrollbar handle, it breaks and no longer fades in or out.

Here's my attempted code...

$('#scrollbar1').tinyscrollbar({ size: 790, sizethumb: 100, wheel: 20, scroll: true });
$('.scrollbar').hide();

var mouseStillDown = false;

$('.thumb').mousedown(function() {
    mouseStillDown = true;
    console.log(mouseStillDown);
});

$('.thumb').mouseup(function() {
    mouseStillDown = false;
    console.log(mouseStillDown);
});


$('.viewport').mouseenter(
     function(){ 
         $('.scrollbar').fadeIn();
     }
);

 $('.viewport').mouseleave(
     function(){
         if (mouseStillDown == false) {
             $('.scrollbar').fadeOut();
         }
     }
);

And here's a link if it will help...

Thanks in advance for any feedback!

Answer 1

You can set mouseStillDown = false; on mouseleave, before you check if mouseStillDown == false. You can try this. Please give feedback.