Javascript 如何制作滚动条的工具提示？

我正在做一个网页列出的项目和这些项目是按字母顺序。今天我在网上滚动我的手机联系人列表时看到了工具提示工具提示已通过滚动条修复，并随滚动条一起移动。我想在我的项目中实现这个想法，因为我的列表项也是按字母顺序排列的。有人能像谷歌那样帮助制作工具提示吗

---

这应该让你开始——显然这在移动设备上不起作用，但它可能是一个很好的起点

    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;
            }
        }
    });

---

我在研究同一个问题。。这个（天真的）解决方案怎么样

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

---

这是一个解决此问题的方法（在chrome上工作）

侦听鼠标向下/向上和滚动事件，并显示一个带有适当标记的固定位置元素content@JaromandaX举个例子就很好了。哈哈xD永远是最好的：D，对像我这样的noobs来说也是。这不适用于鼠标滚轮，但谷歌可以。这仅在单击滚动条滚动时有效。它固定在页面上，但不随滚动条移动。5分钟的黑客工作你想要什么？@MohammedShamshid:你得到最终解决方案了吗？@ParthDoshi没有。相反，我投了我的问题一票