Scroll-Driven Animationの機能を使うことで、CSSだけでOverflowやスクロールバーの表示を検出できる。

Scroll-Driven Animation（スクロール駆動アニメーション）のサポート状況は、以下の通り。

<section class="box">
  <h1>Resize this box.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus elit sed ultricies semper. Proin faucibus sollicitudin nisi, id pellentesque lectus iaculis id.</p>
</section>

.box {
  overflow: auto;
  animation: scrolling forwards;
  animation-timeline: scroll(self);
}

@keyframes scrolling {
  /* スクロールが発生したときに、このスタイルが適用される */
  from,to {
    background-color: red;
  }
}

デモ

参考サイト

• Overflow/scrollbar detection using modern CSS