Tengo una lista desordenada con un número variable de elementos de lista. El <ul> tiene una altura fija (en realidad, la altura de una sola línea de texto) y se establece en overflow-y: scroll .

Cuando muevo la rueda del mouse, se recorre una cierta distancia vertical. Me gustaría que se desplazara exactamente línea por línea, para garantizar que <li> siempre esté correctamente centrado en la parte visible de <ul> .

Comportamiento incorrecto:

 :root { --default-line-height: 24px; } .myUl { background-color: lightblue; height: var(--default-line-height); list-style-type: none; overflow-y: scroll; outline: 1px solid black; } .myLi { font-size: var(--default-line-height); }

 <ul class="myUl"> <li class="myLi">Lorem ipsum dolor sit amet</li> <li class="myLi">Aenean commodo ligula eget dolor.</li> <li class="myLi">Cum sociis natoque penatibus</li> <li class="myLi">Donec quam felis, ultricies nec</li> <li class="myLi">Nulla consequat massa quis enim.</li> <li class="myLi">Donec pede justo, fringilla vel</li> <li class="myLi">In enim justo, rhoncus ut</li> </ul> <p>Please scroll the blue area.</p>

Jugué con scroll-snap pero sin éxito real. La animación "se siente" incómoda y todavía se desplaza por varias líneas. Probablemente podría construir algo condesplazamiento , pero eso parece innecesariamente engorroso.

Parecía razonable poder desplazarse línea por línea bajo ciertas condiciones. Los controles tipo lista (por ejemplo, los menús desplegables) muestran este comportamiento en muchos marcos. No hubiera pensado que esto necesitaría más que un CSS inteligente...

Actualización: la respuesta de Feroz a continuación solo resuelve el aspecto del problema. Todavía es posible desplazarse por varias líneas de una sola vez.