Recently, a function similar to AssistiveTouch on ios has been made on the H5 page: a small suspended widget that can be moved on the page and automatically adsorbs to the edge when not in use.

Problems that arise:

On Android phones, when you move the widget, the page will scroll accordingly.

Because in order to improve the smoothness of page scrolling in the chrome browser, on the new chrome browser,touchmoveevents cannot be usedevent.preventDefault()to prevent page scrolling.

New binding events need to be handled like this (added apassive: falseattribute)

document.addEventListener('click', onClick, {passive: false, capture: false});

But I use react, and the binding monitor is used directly

touchmove How to prevent the page from scrolling when moving the widget?