Mi diseño se ve casi idéntico a este codepen .
.parent { color: white; padding: 70px; position: relative; background-color: #0074d9; margin-top: 50px; } .element { background-color: lighten(#0074d9, 20); opacity: .85; padding: 20px; color: rgba(255,255,255,.9); position: fixed; bottom: 0; left: 0; right: 0; }El codepen funciona de la manera correcta, por lo que ha sido difícil encontrar un ejemplo demostrable.
Cuando mi cursor se coloca sobre el div fijo del "elemento secundario", quiero poder desplazar el elemento principal pero no poder hacer clic.
La respuesta común parece ser "eventos de puntero: ninguno", pero eso permite la interacción de clics con la página a continuación.
Abierto a otras sugerencias o explicaciones de por qué funciona en el codepen, pero no fuera de él.
La solución que funcionó para mí fue usar jquery para tomar el padre por id y agregar mi deltaY a su scrollTop.
<div onWheel={(e) => { const component = $(`#content`); const contentScrollPosition = component.scrollTop(); component.prop("scrollTop", contentScrollPosition + e.deltaY); }} </div>Esto me permite desplazar el padre incluso cuando mi cursor está en el div de posición fija.
Desafortunadamente, el móvil no funciona bien. Primero, debe realizar un seguimiento del evento táctil a través de TouchStart, End y Move. Incluso entonces, pierde el impulso de desplazamiento táctil, lo que hace que se sienta demasiado poco natural.