如何爲滾動條製作工具提示？

我正在做一個列出項目的網頁，這些項目是按字母順序排列的。今天，當我從該網頁滾動移動聯繫人列表時，我看到工具提示在Google's contact網絡中。 工具提示已通過滾動條固定，並隨滾動條一起移動。我想知道把這個想法實現到我的項目中，因爲我的列表項目也是按字母順序排列的。有人可以幫助Google如何製作工具提示嗎？如何爲滾動條製作工具提示？

來源

2015-11-08 Mohammed Shamshid

監聽鼠標按下/並滾動事件，並與相應的內容 –

顯示固定位置元素@JaromandaX一個例子將是完美的。 –

哈哈xD總是最好的：D和像我這樣的noobs。 –

這應該讓你開始 - 在移動設備上顯然這不會工作，但它可能是一個很好的起跳點

var tooltip = document.createElement('div'); 
    tooltip.style.cssText = 'position:fixed;right:18px;top:0;display:none;width:4em;height:1.2em;background:black;font-size:24px;font-weight:bold;color:white;text-align:center;padding-top:5px;'; 
    document.body.appendChild(tooltip); 

    var mouseIsDown = false; 
    var displayed = false; 
    window.addEventListener('mousedown', function() { 
     mouseIsDown = true; 
    }); 
    window.addEventListener('mouseup', function() { 
     mouseIsDown = false; 
     if (displayed) { 
      displayed = false; 
      tooltip.style.display = 'none'; 
     } 
    }); 
    window.addEventListener('mousemove', function(e) { 
     if (displayed) { 
      tooltip.style.top = e.clientY + 'px'; 
      console.log(e); 
     } 
    }); 
    window.addEventListener('scroll', function() { 
     if (mouseIsDown) { 
      var pos = parseInt(window.scrollY * 100.0/window.scrollMaxY); 
      tooltip.textContent = pos + '%'; 
      if (!displayed) { 
       tooltip.style.display = 'block'; 
       displayed = true; 
      } 
     } 
    });

來源

2015-11-08 12:15:46

這不適用於mousewheel，但Google的確如此。這隻有在我們通過單擊滾動條進行滾動時纔有效。它固定在頁面上，但不隨滾動條移動。 http://jsfiddle.net/shmshd12/kv4f2bf0/ –

你想要什麼5分鐘的黑客工作？ –

如何使這項工作在移動設備上？ –

我在做同樣的問題..怎麼樣這（天真）的解決方案？

$(window).scroll(function(){ 
    $("#scrollerTooltip").css("top",(window.pageYOffset+window.pageYOffset*window.innerHeight)/document.body.scrollHeight)+'px'); 
});

下面是一個example此問題（在Chrome工作）

來源

2017-05-03 15:36:42 santa

如何爲滾動條製作工具提示？

回答

相關問題