javascript - 按 `z-index` 切换 div 时连续滚动

Question

我制作了一个应用程序，其中有两个带有滚动事件处理程序的 div，我希望能够在使用它们的 z-index“切换”div 时在两个处理程序之间连续滚动.

|---------- div 1 -----------| switch z-index |---------- div 2 -----------|

 <------------------------- continuous scroll ---------------------------->

问题是，当发生 z-index 切换时，滚动事件仍由第一个 div 处理，直到我停止滚动并重新开始。

是否可以使用 z-index 在 div 事件处理程序可见时立即切换它们？

这是问题的工作示例 https://codesandbox.io/s/rrrxyyjwwp ，当我们放大 3d 地球时， View 切换到 2D map ，我们希望 2D map 开始放大该单一 Action 。相反，滚动事件仍然由下面的 3D 地球处理，我们必须停止并重新启动滚动才能放大 map 。

编辑:我也尝试使用 css display 属性切换 div，结果是一样的

谢谢!

Answer 1

应该可以自己捕获和委托(delegate)滚动事件，然后相应地更改 div 上的事件处理程序。

如果您创建一个附加了脚本的父容器，您可以使用它来确定当前位置、距离和可见元素。基于此，您可以更改 2 个交替元素的属性。粗略地说，像这样的设置应该可以解决问题:

$("#parent").scroll(function() {

//determine desired element to be active/inactive
var activeElementId = "element1";
var inactiveElementId = "element2";

setActive(activeElementId);
setInactive(inactiveElementId);

});

function setActive(elementId){
//add handler
}

function setInactive(elementId){
//remove handler
}