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

问题描述：

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

这是不可能的，因为工具栏是一个操作系统治理元素 – jacktheripper 2012-02-29 19:14:43

除非你创建自己的滚动条，否则你不能创建自己的滚动条。 – jcubic 2012-02-29 19:15:01

尝试使用jQuery滚动条的Javascript – jacktheripper 2012-02-29 19:15:05

答

您的意见中的人是正确的。你不能使用浏览器原生滚动条来做到这一点，你将不得不使用由html css和js组成的自定义滚动条。

我高度推荐http://jscrollpane.kelvinluck.com/我已经没有什么，但这个滚动条解决方案的好运气。在安装了jScrollPane之后，您可以执行一些简单的操作，例如$('.jspVerticalBar').hover(function(){...，甚至是滚动条的目标样式和控件部分。像悬停在轨道上，或拖动。

答

我也有类似的情况：

我相信滚动条实际上不是网页的一部分 - 这是一个操作系统级组件。然而，我能够通过监视父元素上的鼠标位置来解决我的问题（通过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上的谷歌浏览器中测试过，我认为幻数（36,18）需要针对不同的操作系统进行调整，但价值相对相似。

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

相关推荐