I making an app where I have two divs with scroll event handlers and I want to be able to have a continuous scroll between the two handler when the divs are "switched" using their z-index.
|---------- div 1 -----------| switch z-index |---------- div 2 -----------| <------------------------- continuous scroll ----------------------------> The thing is, when the z-index switch happen, the scroll event is still handled by the first div until I stop scrolling and start again.
Is it possible to switch the divs event handlers as soon as they become visible using z-index ?
Here is a working example of the problem https://codesandbox.io/s/k2m6y9o1mo, when we zoom in on the 3d globe the view switch to the 2D map and we expect that 2D map to start zooming in in that single motion. Intead, the scroll event is still handled by the 3D globe underneath and we have to stop and restart the scroll to zoom on the map.
Edit: I also tried to switch divs by using the css display property and the result is the same
Thanks !
1 Answers
Answers 1
It should be possible to catch and delegate the scroll events yourself, and then change the event handlers on the divs accordingly.
If you create a parent container which has a script attached, you can use it to determine the current position, distance and visible elements. Based on this, you can change properties on the 2 alternating elements. Roughly, something like this setup should do the trick:
$("#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 } 
0 comments:
Post a Comment