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

【问题标题】：How to display javascript tooltip when mouseover on scrollbar?鼠标悬停在滚动条上时如何显示javascript工具提示？
【发布时间】：2012-03-19 07:06:40
【问题描述】：

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

【问题讨论】：

这是不可能的，因为工具栏是操作系统管理的元素
除非你创建自己的滚动条，否则你不能这样做，有插件可以做到这一点。
尝试使用 Javascript 的 jQuery 滚动条
我认为你不能，因为滚动条不是网页的一部分。我认为您必须通过创建自己的滚动条来伪造它。不过，我很乐意看到有人解决这个问题。
不是一个简单的场景...可以考虑在窗口边界处添加一个固定位置的窄元素

标签： javascript jquery scrollbar mouseover

【解决方案1】：

您的 cmets 中的人是正确的。您不能使用浏览器的本机滚动条来执行此操作，您必须使用由 html css 和 js 制成的自定义滚动条。

我强烈推荐 http://jscrollpane.kelvinluck.com/ 我对这个滚动条解决方案只有好运。安装 jScrollPane 后，您可以执行一些简单的操作，例如 $('.jspVerticalBar').hover(function(){...，甚至可以定位滚动条的样式和控制部分。就像悬停在轨道上或拖动一样。

【讨论】：

【解决方案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) 需要针对不同的操作系统进行调整，但值会相对相似。

【讨论】：