Как отобразить всплывающую подсказку JavaScript при наведении курсора на полосу прокрутки?

Question

Как заставить всплывающую подсказку javascript появляться, когда пользователь наводит курсор на полосу прокрутки окна браузера?

Answer 1

У меня была похожая ситуация:

Я считаю, что полоса прокрутки на самом деле не является частью веб-страницы - это компонент уровня операционной системы.Тем не менее, я смог обойти мою проблему, отслеживая положение мыши над родительским элементом (у которого есть начальное значение высоты и ширины с помощью css - это может быть необязательным, я не уверен. Мой код ниже использовался немногодругой контекст, но я думаю, что он все еще применим).

Ширина дочерних элементов изменяется по мере необходимости в полосе прокрутки (ширина уменьшается на 18 пикселей в Chrome).Однако ширина родительского элемента / контейнера остается той же ширины.Поскольку он остается той же ширины, мы можем добавить событие mousemove и проверить, попадает ли позиция курсора в промежуток в 18 пикселей, где полоса прокрутки появляется в дочернем элементе.

Кроме того, в зависимости от того, что именно выИмея ввиду полосу прокрутки (всю полосу; вал, кнопки, большой палец и все) или компоненты полосы прокрутки, вы можете достичь функциональности с помощью выполнения некоторых вычислений.

Вся полоса прокрутки - наведите курсор мыши на

$(".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
    }
});

Я только что проверил это в Google-Chrome на Windows 7, я думаю, что магические числа (36,18) нужно будет настроить для разных операционных систем, но они будут относительно схожими по значению.

Answer 2

Люди в ваших комментариях верны.Вы не можете сделать это с помощью встроенной полосы прокрутки в браузерах, вам придется использовать собственную, сделанную из HTML CSS и JS.

Я НАСТОЯТЕЛЬНО рекомендую http://jscrollpane.kelvinluck.com/ У меня не было ничего, кроме удачи с этими решениями полосы прокрутки.После того, как вы установили jScrollPane, вы можете сделать что-нибудь простое, например $('.jspVerticalBar').hover(function(){..., и даже назначить стиль и элементы управления полосой прокрутки.Как парение над дорожкой или перетаскивание.