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

Question

我正在制作一个带有列出项目的网页，这些项目按字母顺序排列。今天在从谷歌联系人网站滚动我的移动联系人列表时，我看到了工具提示。 工具提示 固定在滚动条上，并随着滚动条移动。我想实现这个想法到我的项目中，因为我的列表项也按字母顺序排列。有人可以帮忙实现类似谷歌的工具提示吗？

- Shamshid

---

监听mousedown/up和scroll事件，并显示一个固定位置的元素，其中包含适当的内容。 - Jaromanda X

@JaromandaX 一个例子会很完美。 - Shamshid

哈哈xD，总是最好的:D ，也适合像我这样的新手。 - Shamshid

Answer 1

这应该能让你入门 - 明显地，这在移动设备上不起作用，但它可能是一个很好的起点

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

- Jaromanda X

---

这个无法使用鼠标滚轮，但是Google的可以。只有在通过点击滚动条滚动时才有效。它固定在页面上，但不随滚动条移动。http://jsfiddle.net/shmshd12/kv4f2bf0/ - Shamshid

你想要进行5分钟的黑客工作吗？ - Jaromanda X

@MohammedShamshid：你最终解决了这个问题吗？ - Parth Doshi

@ParthDoshi 不是的。相反，我的问题被投下了负票。 - Shamshid

Answer 2

我之前也在解决同一个问题...这个（简单）方案怎么样？

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

这里有一个示例，可以解决这个问题（在Chrome上工作）

- santa