soy Kseso y esto EsCSS

Evita pulsaciones no deseadas al hacer scroll con "Pointer-events: none"

Cómo evitar pulsaciones no deseadas y los repaints y reflows innecesarios al hacer scroll

Evita pulsaciones no deseadas al hacer scroll con "Pointer-events: none"

·Por Kseso ✎ 4

Uno de los problemas a los que se enfrentan los usuarios con dispositivos táctiles al desplazar hacer scroll son los clicks o pulsaciones accidentales con todo lo que ello pueda conllevar.

Pero no son sólo ellos quienes "sufren" el efecto de los eventos "accidentales" mientras se desplaza el contenido. Paul Lewis en html5rocks.com publicó un artículo, "Avoiding Unnecessary Paints" sobre lo que supone para el navegador (recursos y trabajo) los :hover accidentales mientras se hace scroll debido a los "repaints y reflows" que se ve obligado a realizar.

Evita pulsaciones no deseadas al hacer scroll con "Pointer-events: none"AVISO DE AUTORÍA Y CRÉDITOS:
la técnica que voy a compartir contigo es original de @ryanseddon, publicada en su página "THE CSS NINJA": 60fps scrolling using pointer-events: none.
Yo sólo me hago eco de ella para darla a conocer entre los lectores de mi blog. Por favor, visita el artículo original, que en la fuente se encuentra el mejor agua.

if scroll 'pointer-events: none'

La solucción propuesta por @ryanseddon la encuentro de lo más sencilla y elegante. Sólo es necesario deshabilitar los eventos sobre el body (y sus contenidos) en el momento de iniciarse el scroll y mientras dura el desplazamiento.

Ésto es tan fácil como declarar la regla css oportuna y aplicar la clase .disable-hover al 'body' mientras se hace scroll.

.disable-hover, .disable-hover * { pointer-events: none !important; }

El selector .disable-hover * y el valor '!important' es necesario por si a algún elemento se le hubiese declarado un valor de 'auto' para esta propiedad.

A partir de esa declaración Css sólo se necesita aplicar la clase al body cuando se la necesita. Para ello Css no ofrece solucción, por lo que hay que recurrir a js:

var body = document.body, timer; window.addEventListener('scroll', function() { clearTimeout(timer); if(!body.classList.contains('disable-hover')) { body.classList.add('disable-hover') } timer = setTimeout(function(){ body.classList.remove('disable-hover') },500); }, false);

Ahora ya puedes hacer scroll sin miedo a los clicks no deseados y evitar 'repaints y reflows' innecesarios mientras desplazas los contenidos.

Recuerda que la autoría y el mérito de esta realización son de @ryanseddon

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso