No pude encontrar ningún evento al que conectarme para esto: quiero controlar la distancia de desplazamiento cuando el usuario hace cosas como mover la rueda del mouse, hacer clic en un botón de desplazamiento (hacia arriba o hacia abajo), hacer clic en el espacio vacío de una barra de desplazamiento, etc
Por ejemplo, si tengo una lista de cosas y cada fila tiene una altura de 16 px, ¿cómo podría obligarla a desplazarse 16 píxeles para eventos de desplazamiento único (es decir, rueda del mouse hacia arriba/abajo, o hacer clic en el botón de desplazamiento, si uno existe)? Y luego, si se desplaza haciendo clic en la barra de desplazamiento vacía, ¿cómo puedo asegurarme de que se desplaza en una cantidad fija, de modo que cuando termine de desplazarse, esté perfectamente alineado? El mejor ejemplo que puedo dar es cómo se comporta en Excel. Siempre que tenga las líneas de desplazamiento configuradas en 1 línea en la configuración, al desplazarse hacia arriba o hacia abajo se moverá una fila a la vez. Al hacer clic en la parte vacía de la barra de desplazamiento, se mueve hacia abajo exactamente a la siguiente fila no completamente visible.
Mi investigación, hasta ahora, indica que usaré la función .scroll() (al menos si estoy usando jQuery), pero estoy completamente perplejo con el plan de ataque, más aún porque no puedo encuentre alguna forma de diferenciar entre el desplazamiento de la rueda del mouse, el desplazamiento del botón o el salto de la barra de desplazamiento (o cualquiera que sea el término).
¿Hay alguna forma de restringir esto en CSS, evitando JavaScript en absoluto?
Para lograr esto, debe usar scroll-snap-type , como lo indica DM en los comentarios.
Configuraría el div principal para que tenga scroll-snap-type: y mandatory; , y sus elementos secundarios inmediatos tendrían scroll-snap-align: top (o bottom)! Esto debería permitir que las filas se vean perfectamente, siempre que el elemento contenedor tenga un tamaño apropiado (y suponiendo que cada elemento secundario tenga un tamaño fijo conocido).