スクロールバーでマウスオーバーするとjavascriptのツールチップを表示するには？

Question

ユーザーがブラウザウィンドウのスクロールバーにマウスを移動したときに、javascriptのポップアップツールチップを表示させるにはどうすればよいですか？

Answer 1

あなたのコメントの人は正しいです。あなたはブラウザのネイティブスクロールバーでこれを行うことはできません、あなたはhtml cssとjsで作られたカスタムを使用する必要があります。

大いにお薦めします。http://jscrollpane.kelvinluck.com/私はこのスクロールバーのソリューションには何もありませんでした。 jScrollPaneをインストールしたら、$('.jspVerticalBar').hover(function(){...という単純な操作を行い、スクロールバーのスタイルとコントロール部分をターゲットにすることもできます。トラック上をホバリングする、またはドラッグするように。

Answer 2

私は似たような状況だった：

を私は、スクロールバーが実際にWebページの一部ではないと考えている - それは、オペレーティング・システム・レベルのコンポーネントです。しかし、私は親要素上のマウスの位置を監視することで問題を回避することができました（cssで初期の高さと幅の値を持っています - これはオプションかもしれませんが、私は確信していません。私はそれがまだ適用可能だと思う）。

子要素の幅は、スクロールバーが必要なときにサイズ変更されます（幅はChromeでは18ピクセル減少します）。ただし、親要素/コンテナの幅は同じ幅のままです。同じ幅のままなので、mousemoveイベントを追加して、カーソルの位置がスクロールバーが子要素に現れるその18ピクセルのギャップに入るかどうかを確認することができます。

また、スクロールバー（シャフト、ボタン、サム、およびすべてのバー）またはスクロールバーのコンポーネントを正確に何であるかに応じて、いくつかの計算を支援する機能を実現できます。

全体のスクロールバー - マウスオーバー

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

- マウス

$(".parent").bind("mousemove",function(e){ 
    if($(".partent").width() <= e.offsetX){ 
     //display tool-tip div 
    }else{ 
     //If displayed, hide tool-tip div 
    } 
}); 

スクロールバーサムオーバー210

私はこれをWindows 7のGoogle Chromeでのみテストしましたが、マジックナンバー（36,18）はオペレーティングシステムごとに2つにする必要がありますが、値は比較的似ていると思います。