スクロールバーの上かどうか

HTML要素のポインター系のイベントをハンドリングするとき、そのポインターがそのHTML要素のスクロールバーの上にあるかどうかはtargetのclientWidth, clientHeightとoffsetX, offsetYを使うとわかります。

<div style="margin: 100px; width: 100px; height: 100px; background-color: pink; overflow: scroll;" onpointerdown="handlePointerDown(event)"></div>
<script>
  function onScrollbar(event) {
    if (event.target instanceof Element) {
      const { clientWidth, clientHeight } = event.target
      const { offsetX, offsetY } = event
      if (clientWidth < offsetX || clientHeight < offsetY) {
        return true
      }
    }

    return false
  }

  function handlePointerDown(event) {
    if (onScrollbar(event)) {
      console.log('On scrollbar')
    }
    else {
      console.log('Not on scrollbar')
    }
  }
</script>