如何在鼠標懸停在滾動條上時顯示javascript工具提示？

Question

當用戶將鼠標懸停在瀏覽器窗口的滾動條上時，如何顯示JavaScript彈出式工具提示？

Answer 1

您的意見中的人是正確的。你不能使用瀏覽器原生滾動條來做到這一點，你將不得不使用由html css和js組成的自定義滾動條。

我高度推薦http://jscrollpane.kelvinluck.com/我已經沒有什麼，但這個滾動條解決方案的好運氣。在安裝了jScrollPane之後，您可以執行一些簡單的操作，例如$('.jspVerticalBar').hover(function(){...，甚至是滾動條的目標樣式和控件部分。像懸停在軌道上，或拖動。

Answer 2

我也有類似的情況：

我相信滾動條實際上​​不是網頁的一部分 - 這是一個操作系統級組件。然而，我能夠通過監視父元素上的鼠標位置來解決我的問題（通過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）需要針對不同的操作系統進行調整，但價值相對相似。