How to prevent scrolling when touching a certain html element on a touch device?

Question

I have a simple browser game which is finished on desktop, but which I am trying to make work on mobile.

The current problem is that when the user uses a touchscreen to make a vertical dragging motion within the game's container, it either scrolls the screen or tries to refresh the page depending on direction and level of scroll.

I have tried setting onScroll, onTouchMove, onTouchStart, onDragStart, and onDrag events, all with both e.stopPropagation() and e.preventDefault() as well as returning false but the problem persists.

I know it is possible because if you open 2048's browser implementation on your phone and try dragging within the game container, it does not scroll, yet you can scroll if you drag anywhere on the page outside the game container. I couldn't find how it's done in the page's source, though.

How can this be accomplished?

Answer 1

Using the following:

* {
...
user-select: none;
touch-action: none;
...
}

shall resolve the problem.