Estoy buscando un script JS puro que pueda hacer que una lista de elementos se desplace verticalmente pero en función de la posición del mouse de los usuarios sobre ellos.
Por lo tanto, si se desplaza sobre la lista pero más cerca de la parte superior, verá los elementos cerca de la parte superior de la lista y si pasa el mouse sobre la parte inferior, verá los elementos más cerca del final de la lista.
He visto esta técnica utilizada varias veces, pero ahora estoy tratando de encontrar un ejemplo. ¡No puedo encontrar uno!
Básicamente, permite que quepa más contenido en un espacio pequeño y, al mismo tiempo, permite el acceso a todo.
¿Algunas ideas?
Puede escuchar el evento mousemove en el elemento y obtener la coordenada y del mouse en relación con el elemento. Luego, puede crear un intervalo que se desplace hacia arriba o hacia abajo en función de si la coordenada y relativa es mayor que la mitad de la altura del elemento.
También deberá agregar un detector de eventos mouseleave que borre el intervalo para que no siga desplazándose después de que el mouse ya no esté sobre el elemento.
const halfHeight = list.offsetHeight / 2; var interval list.addEventListener('mousemove', function(e) { const relativeY = e.clientY - list.getBoundingClientRect().top; clearInterval(interval) interval = setInterval(() => list.scrollTop += relativeY > halfHeight ? 10 : -10, 100) }) list.addEventListener('mouseleave', () => { clearInterval(interval) }) #list { height: 150px; overflow: auto; border: 1px solid; } <div id="list"><ul><li>1<li>2<li>3<li>4<li>5<li>6<li>7<li>8<li>9<li>10<li>11<li>12<li>13<li>14<li>15<li>16<li>17<li>18<li>19<li>20</ul></div>