Question

大家好我有以下代码，我正在使用它创建一个简单的工具提示。

HTML

<div class="x">
    <div class="abc">abc</div>
</div>

的javascript

//Finding the elements position
var elmPosition = function (elm) {

    var x = 0,
        y = 0;

    while (elm) {
        x += (elm.offsetLeft - elm.scrollLeft + elm.clientLeft);
        y += (elm.offsetTop - elm.scrollTop + elm.clientTop);
        elm = elm.offsetParent;
    }

    return {
        x: x,
        y: y
    };
};

//Creating and adding the tooltip to document
document.querySelector('.abc').addEventListener("mouseover", function () {
    var elm = document.createElement("div");
    var position = elmPosition(document.querySelector('.abc'));
    elm.textContent = 'just a tooltip';
    elm.classList.add('tooltip');
    document.body.appendChild(elm);
    elm.style.position = 'absolute';
    elm.style.top = (position.y - 20) + 'px';

});

//remove tooltip on mouse out
document.querySelector('.abc').addEventListener("mouseout", function () {
    document.body.removeChild(document.body.querySelector('.tooltip'));
})

DEMO

生成的工具提示应始终位于鼠标悬停元素的顶部。此代码完美有效，直到页面滚动。当页面滚动时，工具提示的位置被推到远离鼠标悬停元素的位置。有人可以帮我找出问题所在。谢谢:)）

Answer 1

您使用scrollLeft检查的内容是elm滚动了多远。你想要的是我猜的窗口滚动了多远。

使用window.pageYOffset和window.pageXOffset，如下所示：

while (elm) {
    x += (elm.offsetLeft - window.pageXOffset + elm.clientLeft);
    y += (elm.offsetTop - window.pageYOffset + elm.clientTop);
    elm = elm.offsetParent;
}

修改

尝试之后，如果您不使用position: fixed，则涉及滚动的内容并不大。我删除了它并编辑了你的小提琴：https://jsfiddle.net/mg606dh1/2/

编辑2

您还可以将位置更改为position: fixed，并按照您的意图使用代码：https://jsfiddle.net/mg606dh1/3/

使用javascript查找元素的位置

1 个答案: