css overflow:scrollとjavascript touch-startイベントの共存方法について

前提・実現したいこと

スマホのブラウザで動かすということ。
iOS : safari
Android : chrome

touch-startイベントと、overflow:scrollのどちらも動くようにしたい。
例えば、

overflow : scroll;が適用されている要素内の文字がスクロールされる必要がない時(ブロック要素に入りきっている時)は、touch-startイベントに登録している処理を行いたい。 (これは想定通り動く)
overflow : scroll;が適用されている要素内の文字が多くスクロールされる必要がある時(ブロック要素に入りきっていない時)は、touch-startイベントではなく、スクロールできるようにしたい

発生している問題・エラーメッセージ

上記1.2.の記載があるが、
現状、overflow : scroll;が適用されている要素内の文字が多くスクロールされる必要がある時(ブロック要素に入りきっていない時)は、タッチでスクロールされるようにしたいのに、touch-startイベントが動いてしまう。

該当のソースコード

<div class="touch-start-event-element">                               ----  touchstartイベントが登録されている要素
  <div class="scroll-element" style="overflow: scroll;">              ----  overflow: scroll; が適用されている要素
    testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
    testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
    testtesttesttesttesttesttesttesttesttesttesttesttesttesttest      ----  スクロールされる予定の文字
    testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
    testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
  </div>
</div>