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

Question

我制作了一个应用程序，其中我有两个带有滚动事件处理程序的 div，并且我希望能够在使用它们的z-index.

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

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

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

是否可以在 divs 事件处理程序变得可见时立即切换它们z-index？

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

编辑：我也尝试通过使用 cssdisplay属性来切换 div，结果是一样的

谢谢 ！

标签： javascriptcssreactjs

Answer 1

应该可以自己捕获和委托滚动事件，然后相应地更改 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
}