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

How to display javascript tooltip when mouseover on scrollbar?

本文关键字：显示 javascript 工具提示 悬停 鼠标 滚动条      更新时间：2023-09-26

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

您评论中的人是正确的。你不能用浏览器的原生滚动条来做到这一点，你必须使用一个由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上的谷歌Chrome中测试过这一点，我认为不同的操作系统需要对神奇的数字（36,18）进行推特处理，但其价值相对相似。

相关文章：