Question

当用户将鼠标悬停在浏览器窗口的滚动条上时，如何显示javascript弹出工具提示？

Answer 1

您评论中的人是正确的。您无法使用浏览器本机滚动条执行此操作，您必须使用由html css和js组成的自定义滚动条。

我强烈推荐http://jscrollpane.kelvinluck.com/我对此滚动条解决方案一无所获。安装jScrollPane之后，您可以执行像$('.jspVerticalBar').hover(function(){...这样简单的操作，甚至可以控制滚动条的样式和控件部分。就像悬停在赛道上或拖拽一样。

Answer 2

我有类似的情况：

我认为滚动条实际上并不是网页的一部分 - 它是一个操作系统级组件。但是，我能够通过监视父元素上的鼠标位置（通过css具有初始高度和宽度值）来解决我的问题 - 这可能是可选的，我不确定。我的代码在下面稍微使用了不同的背景，但我认为它仍然适用。）

在需要滚动条时，子元素宽度会重新调整大小（在Chrome中宽度减少18像素）。但是，父元素/容器的宽度保持相同的宽度。因为它保持相同的宽度，我们可以添加一个mousemove事件并检查光标的位置是否落入子元素中滚动条出现的18px间隙。

此外，根据滚动条（整个条;轴，按钮，拇指和所有内容）或滚动条组件的具体含义，您可以在进行一些计算的帮助下实现功能。

整个滚动条 - 鼠标悬停在

$(".parent").bind("mousemove",function(e){
    if($(".partent").width() <= e.offsetX){
        //display tool-tip div
    }else{
        //If displayed, hide tool-tip div
    }
});

滚动条拇指 - 鼠标悬停

$(".parent").bind("mousemove",function(e){
    if($(".child").width() <= e.offsetX){
        var scrollbarHeight = $(".parent").height() - 36; //36 = height of both up and down arrows
        var scrollbarThumbHeight = scrollbarHeight/$(".child").height();
        var scrollTopPosition = $(".parent").get(0).scrollTop;
        var relativeThumbPosition = (childScrollTop/$(".child").height()) + 18;//18 = offset from the up button
        if(e.offsetY >= relativeThumbPosition && e.offsetY <= relativeThumbPosition+scrollbarThumbHeight){
            //display tooltip div
        }else{
            //If displayed, hide tool-tip div
        }
    }else{
        //If displayed, hide tool-tip div
    }
});

其他鼠标输出

$(".parent").bind("mouseout",function(e){
    if($(".child").width() <= e.offsetX){
        //If displayed, hide tool-tip div
    }
});

我只是在Windows 7上的Google-Chrome中对此进行了测试，我认为神奇数字（36,18）需要针对不同的操作系统进行调整，但价值相对相似。

鼠标悬停在滚动条上时如何显示javascript工具提示？

2 个答案: