Question

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

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

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

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

是否可以在使用z-index显示divs事件处理程序后立即切换它们？

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

编辑：我还尝试使用css display属性切换div，结果是相同的

谢谢！

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
}

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

1 个答案: