Question

我尝试根据用户点击的位置在div中插入图片。这似乎工作正常，除非div是可滚动的，然后无论我们滚动到哪里，图像的位置都保持不变。图像应保留在div内相对于内容的相同位置。

代码：

$("#a").on("click",function(e){

    var top=e.pageY-$(this).position().top,
        left=e.pageX-$(this).position().left;

    $('.imgajoutee').remove();
    $(this).append("<img src='https://upload.wikimedia.org/wikipedia/commons/0/0c/Dive_hand_signal_OK_1.png' class='imgajoutee' style='top:"+top+"px;left:"+left+"px;'/>");

});

Answer 1

您需要做几件事：

更改您的img CSS，使其position值为absolute而不是fixed
您还需要更改容器（在这种情况下为#a）以获得position:relative
最后，您的top计算应更改为使用.offset()而不是position()，并为容器添加.scrollTop()值。这会计算容器滚动的程度。

考虑到所有这些因素，see updated JSFiddle：

<强> CSS

#a { position:relative; }
img { position: absolute; }

<强> JS

$("#a").on("click",function(e) {
    var top = $(this).scrollTop() + e.pageY - $(this).offset().top,
        left = e.pageX-$(this).offset().left;
    ...
});

根据点击位置将图像插入DIV

1 个答案: