Quiero implementar el selector de tiempo de la rueda de Android en js
Encuentro esta demostración: https://demo.mobiscroll.com/jquery/datetime/gregorian-jalali-hijri#
vea mi gif, la vista de desplazamiento de demostración scrollTop siempre 0, pero en mi código borrador, scrollTop no puede desplazarse hacia arriba, entonces cuando scrollTop 0, ¿cuál es el mecanismo en esta demostración para desplazarse hacia arriba?
Cada vez que un usuario se desplaza, afecta un cuadro de desplazamiento de elementos. windows.scrollTo() afectará el cuadro de desplazamiento del bloque contenedor superior. Esto afecta a la gente, llámalo desplazar la ventana o el documento.
encuentro la solución tmp
cuando scrollTop 0, el evento de vista de desplazamiento "scroll" no se activa, el evento "wheel" (desplazamiento hacia arriba con la rueda del mouse) y "touchmove" (arrastre móvil para desplazarse hacia arriba) aún funcionan
el siguiente es mi código usando el evento "rueda"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!--mobile friendly--> <meta name="viewport" content="width=device-width, user-scalable=yes"> <style> .c0 { height: 500px; display: flex; justify-content: center; align-items: center; background-color: lightblue; } .c { top: 50%; width: 100%; height: 300px; border: 5px solid black; overflow-y: auto; } .inner { background-color: pink; margin-top: 0px; width: 100%; user-select: none; height: 1000px; } </style> </head> <body> <div class="c0"> <div class="c"> <div class="inner">inner</div> </div> </div> <script type="module"> var c = document.querySelector(".c") var inner = document.querySelector(".inner") var startY inner.addEventListener("wheel", (ev) => { console.log("wheel") inner.style.marginTop = `${inner.offsetTop + ev.deltaY}px` }) </script> </body> </html>