Estoy tratando de construir un sitio de cartera donde un ascensor sube y cuando llega a un piso, las puertas se abren y los detalles se renderizan. Al desplazarse más, las puertas se cierran y, cuando llega a cierto punto, se rompe y se desliza suavemente hasta el piso más cercano.

Lo tengo funcionando bien en Firefox, pero no en los navegadores basados en Chrome, lo que realmente me confunde. También puedo hacer que el navegador basado en Chrome se mueva a un punto de anclaje hash o a una vista de desplazamiento, pero solo si los dispara con un botón, ¿nunca funcionan cuando el observador de la intersección llama al código?

Estoy usando el observador de intersección para detectar qué piso es visible e iniciar el evento de apertura y cierre y un observador separado para detectar cuándo un piso está al 50 % en la pantalla para ajustarse al piso más cercano.

Primero traté de evitar el segundo observador de intersección usando scroll-snap para alinear los pisos, pero eso no funcionó en ningún navegador.

 .container-projects { z-index: -2; min-height: 80vh; min-width: 100%; display: flex; flex-direction: column; justify-content: start; scroll-snap-type: y proximity; } .project { z-index: -2; background-size: cover; width: 100%; height: 80vh; padding-top: 3rem; padding-bottom: 3rem; scroll-snap-align: start; }

Luego traté de usar la función scrollToView () que funciona maravillosamente en Firefox pero no en Chrome.

 const floorObserver = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.scrollIntoView({ behavior: 'smooth', block: 'end' }); } }); }, { threshold: 0.5 } );

También traté de usar los enlaces de anclaje para que el observador de la intersección ubicara los pisos, lo que nuevamente funciona bien en Firefox pero no en Chrome.

 const floorObserver = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { move(entry.target.id); } }); }, { threshold: 0.5 } ); function move(entry) { window.location.href = '#' + entry; }

Tengo la sensación de que tal vez porque el desplazamiento del mouse tiene prioridad sobre el scrollTo y los enlaces de anclaje, pero realmente no entiendo qué está pasando.

Cualquier ayuda es muy apreciada, pero la ayuda sin JQuery es aún más apreciada.

Muchas gracias

Geoff