如何实现鼠标移出时的淡出效果，在鼠标点击并拖动后再移出时？

Question

我正在使用jQuery来淡入淡出tinyScrollBar，当用户鼠标进入或离开可滚动区域时。我的问题是，如果用户点击并拖动滚动条手柄，并在除了滚动条手柄以外的任何地方释放鼠标，它会出现故障，不再淡入淡出。

这是我尝试的代码...

$('#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();
         }
     }
);

如果需要的话，这里有一个链接...

非常感谢您提供的任何反馈！

- DanV

Answer 1

在检查 mouseStillDown == false 之前，在 mouseleave 上设置 mouseStillDown = false;。 你可以尝试这个方法。请给予反馈。

- Soumalya Banerjee

---

谢谢@Soumalya！这确实解决了问题，但也引发了另一个问题。现在当你滚动时，即你点击鼠标并拖动滚动条手柄，如果你鼠标移出区域，滚动条会消失。理想情况下，当用户滚动时，我不希望它完全消失。点击链接查看更新 - DanV

好的伙计，抱歉回复晚了。你能再提供一下链接吗？因为它正在寻找用户名和密码。 - Soumalya Banerjee

没问题。网站现在已经上线，地址是www.indoorplaymagazine.co.uk/Directory/。这不是什么大问题，但修复它会更好。干杯！ - DanV

现在，在将 mouseStillDown = false; 进行操作之前，添加 if(mouseStillDown == true) return;。希望这能有所帮助。 - Soumalya Banerjee

很抱歉，没有运气。这基本上使它的功能与我最初设想的一样。如果你不在滚动条上释放鼠标，它就会出问题。 - DanV