Comment afficher une infobulle JavaScript lorsque la souris survole la barre de défilement?

Question

Comment puis-je faire apparaître une info-bulle JavaScript lorsque l'utilisateur survole la barre de défilement de la fenêtre du navigateur ?

Answer 1

Les personnes dans vos commentaires ont raison. Vous ne pouvez pas le faire avec la barre de défilement native du navigateur, vous devrez utiliser une barre de défilement personnalisée en html css et js.

Je recommande VIVEMENT http://jscrollpane.kelvinluck.com/ J'ai eu que du bonheur avec cette solution de barre de défilement. Après avoir installé jScrollPane, vous pouvez faire quelque chose d'aussi simple que $('.jspVerticalBar').hover(function(){... et même cibler le style et contrôler des parties de la barre de défilement. Comme survoler la piste, ou le curseur.

Answer 2

J'ai eu une situation similaire:

Je crois que la barre de défilement n'est pas en réalité une partie de la page web - c'est un composant au niveau du système d'exploitation. Cependant, j'ai pu contourner mon problème en surveillant la position de la souris sur un élément parent (qui a une valeur de hauteur et de largeur initiale via css - cela pourrait être optionnel, je ne suis pas sûr. Mon code ci-dessous était utilisé dans un contexte légèrement différent mais je pense qu'il est toujours applicable).

La largeur des éléments enfants est redimensionnée lorsqu'on a besoin de la barre de défilement (la largeur est diminuée de 18 pixels, sur Chrome). Cependant, la largeur de l'élément/conteneur parent reste la même. Parce qu'elle reste la même largeur, nous pouvons ajouter un événement mousemove et vérifier si la position du curseur tombe dans cet espace de 18px où la barre de défilement apparaît dans l'élément enfant.

Aussi, selon ce que vous entendez exactement par barre de défilement (la barre entière; axe, boutons, pouce, etc.) ou les composants de la barre de défilement, vous pouvez obtenir la fonctionnalité en faisant quelques calculs.

Barre de défilement entière - survol de la souris

$(".parent").bind("mousemove",function(e){
    if($(".partent").width() <= e.offsetX){
        //afficher div de tooltip
    }else{
        //Si affiché, masquer div de tooltip
    }
});

Pouce de la barre de défilement - survol de la souris

$(".parent").bind("mousemove",function(e){
    if($(".child").width() <= e.offsetX){
        var scrollbarHeight = $(".parent").height() - 36; //36 = hauteur des deux flèches haut et bas
        var scrollbarThumbHeight = scrollbarHeight/$(".child").height();
        var scrollTopPosition = $(".parent").get(0).scrollTop;
        var relativeThumbPosition = (childScrollTop/$(".child").height()) + 18;//18 = décalage par rapport à la flèche haut
        if(e.offsetY >= relativeThumbPosition && e.offsetY <= relativeThumbPosition+scrollbarThumbHeight){
            //afficher div de tooltip
        }else{
            //Si affiché, masquer div de tooltip
        }
    }else{
        //Si affiché, masquer div de tooltip
    }
});

Sortie de souris supplémentaire

$(".parent").bind("mouseout",function(e){
    if($(".child").width() <= e.offsetX){
        //Si affiché, masquer div de tooltip
    }
});

J'ai seulement testé ceci sur Google-Chrome sur Windows 7, je pense que les nombres magiques (36, 18) devraient être ajustés pour différents systèmes d'exploitation mais seraient relativement similaires en valeur.