Question

我正在使用列出的项目进行网页，这些项目按字母顺序排列。今天，当我从该网页滚动我的移动联系人列表时，我在Google's contact网页上看到了工具提示。 工具提示已使用滚动条修复，并随滚动条一起移动。我想知道将这个想法实现到我的项目中，因为我的列表项也是按字母顺序排列的。有人可以帮助像谷歌一样制作工具提示吗？

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

Answer 2

我正在研究同样的问题......这个（天真的）解决方案呢？

{{1}}

这是针对此问题的example（使用chrome）

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

2 个答案: