Webページ内をスクロールしてる最中は追従するバナーやページの先頭へ戻るボタンを非表示や半透明にして、スクロールが止まったら要素を表示させるみたいな実装をしたいとき。

例では、スクロール中はhtml要素にscrollというclass属性を与え、スクロール止まったらscrollのclass属性を削除するように実装した。

• スクロール中だけ要素のスタイルを変えるサンプル

const html = document.getElementsByTagName('html')[0];
let timerID;
window.addEventListener('scroll',function(){
 clearTimeout(timerID);
 html.classList.add('scroll'); //スクロールしてるとき
 timerID = setTimeout( function(){
  html.classList.remove('scroll'); //スクロールが止まったとき
 }, 200) ;
});

CSSでは以下のように実装すると良いと思う。

.pagetopBtn{
 display: block; /*通常は表示*/
}
.scroll .pagetopBtn{
 display: none; /*スクロール中は非表示*/
}

おしまい♥