如何将窥视效果从悬停更改为滚动

<div class="scroll-effect">滚动效果</div>

.scroll-effect {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  transition: background-color 0.3s ease;
}

.scroll-effect:focus {
  background-color: #f00;
}

window.addEventListener('scroll', function() {
  var element = document.querySelector('.scroll-effect');
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
  if (scrollTop > 100) {
    element.classList.add('scrolled');
  } else {
    element.classList.remove('scrolled');
  }
});