移动文档中的元素会导致滚动重置

Question

我有多个以“div”形式实现的“popup”窗口。当用户点击一个div时，我会将该div放在主体$(body).append(this.popContainer)或模块容器$(me.parentContainer).append($(this));的末尾。问题是，当我这样做时，滚动位置被重置。

这是我可以确保弹出窗口在所有其他窗口之上。我可能会混淆z-index，但页面中的许多元素都是具有行为和html的模块，它们可以围绕文档移动或放置在其他位置。

模块不知道其他模块，但要正确实现z-index，模块必须知道页面中的所有其他元素，以确保它们正确堆叠。

要向前移动浮动模块（堆栈顶部），我想继续使用类似$(this.container).append(this.subElemnt)的东西。

所以问题是：有没有办法在不使用z-index的情况下重新排列文档元素并且没有重置滚动位置？

它可以是一个jQuery解决方案或任何其他库。

下面是示例代码https://jsfiddle.net/gsrLs671/（滚动和点击）

Answer 1

这是你在哪里找？它保持滚动条的当前位置。

var incrementalid = 0; 
 

 
function container(config) { 
 
    var colors = ["yellow", "red"], 
 
    addHandlers, 
 
    blocks = [undefined, undefined].map((none, index) => { 
 
     incrementalid++; 
 
     return block({ 
 
     color: colors[index] 
 
     }); 
 
    }); 
 
    var container = $("<div></div>"); 
 
    container.css({ 
 
    position: "absolute", 
 
    width: "150px", 
 
    backgroundColor: config.color, 
 
    height: "150px", 
 
    top: config.pos + "px", 
 
    left: config.pos + "px", 
 
    overflow: "scroll" 
 
    }); 
 
    container[0].id = incrementalid; 
 
    addHandlers = (function(id) { 
 
    return function() { 
 
     console.log("this is addhandler:", $("#" + id), id); 
 

 
     $("#" + id).off("click.moveUp").on("click.moveUp", function() { 
 
     var scrollTop = $(this).scrollTop(); 
 
     var scrollLeft = $(this).scrollLeft();  
 
     $("#hi").append($(this));   
 
     $(this).scrollTop(scrollTop).scrollLeft(scrollLeft); 
 
     addHandlers(); 
 
     }); 
 
    } 
 
    }(incrementalid)) 
 
    incrementalid++; 
 
    container.append(blocks); 
 
    $("#hi").append(container); 
 
    addHandlers(); 
 
}; 
 

 
function block(config) { 
 
    var block = $("<div></div>"); 
 
    block[0].id = incrementalid; 
 
    block.css({ 
 
    position: "absolute", 
 
    width: "60px", 
 
    height: "60px", 
 
    backgroundColor: config.color, 
 
    top: (60 * incrementalid) + "px", 
 
    left: (60 * incrementalid) + "px" 
 
    }); 
 
    return block; 
 
}; 
 

 
container({ 
 
    pos: 30, 
 
    color: "blue" 
 
}); 
 
container({ 
 
    pos: -10, 
 
    color: "green" 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hi" style="position:relative"> 
 

 
</div>