Prevent full page touch

Trying to prevent the entire page from moving as seen in gif.
It interferes with scrolling sometimes and is just annoying for the user.

I’ve tried adding an html element with the following to the reusable header. Which successfully stops all touch. But then the scrolling elements no longer work.

I’ve tried using script to allow certain element ID to scroll auto. But couldn’t get anything to work right.

Any idea!!?

<script> document.addEventListener('touchmove', function(event) { event.preventDefault(); }, { passive: false }); </script>

See action

Google has it: overscroll-behavior - CSS: Cascading Style Sheets | MDN

This did the trick. Thank you for the guidance.

body {
  overflow: hidden;