Как избежать ненужных перерисовок страницы при помощи pointer-events

Чтобы избавиться от лишних перерисовок страницы Пол Льюис советует отключить эффекты страницы при наведении (игнорировать hover) во время прокрутки её пользователем.

При возникновении события scrollstart добавляем к тегу <body> класс disable-hover, внутри которого прописываем pointer-events: none, а при возникновении события scrollend удаляем этот класс по таймеру:


var timer,
    class = 'disable-hover',
    $body = $('body');
$(window).scroll(function() {
    clearTimeout(timer);
    if (!$body.hasClass(class)) {
      $body.addClass(class);
    }
    timer = setTimeout(function(){
      $body.removeClass(class);
    },500);
});

Кратко описываем наш умный класс:


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

И вы на себе почувствуете колоссальный прирост в скорости работы вашего сайта.

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • Дима

    Реально работает, интересно, спасибо)

    • Не за что — сам пользуюсь )