Верх страницы
Обложка к записи Как избежать ненужных перерисовок страницы при помощи pointer-events
Время для прочтения: 0 мин. 2 сек.

Как избежать ненужных перерисовок страницы при помощи 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;
}

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

Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

2 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Дима
Дима
9 лет назад

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

mihdan
9 лет назад
Ответить на  Дима

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

Предыдущая запись
Следующая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы