スクロール時のhoverイベントをoffにして高速化

スクロール時のhoverイベントをoffにして高速化

気合を入れて、hover時のstyle設定をてんこ盛りにすると、ブラウザスクロール時にもそれが効いて、動作がモッサリする。

モッサリhover.css

.hover-elm:hover {
  box-shadow: 1px 1px 1px #000;
}

そんなとき、pointer-eventsをスクロール時に動的に設定すると、hoverでのデザイン変更が効かなくなっていい感じになる。

追加分.css

.hover-shit {
  pointer-events: none;
}

scroll.js

var body = document.body,
    timer;

window.addEventListener('scroll', function() {
  clearTimeout(timer);
  if(!body.classList.contains('hover-shit')) {
    body.classList.add('hover-shit')
  }
  
  timer = setTimeout(function(){
    body.classList.remove('hover-shit')
  },500);
}, false);
© 2009-2017 Osajiru All Rights Reserved.