I need assistance in preventing all forms of page scrolling within my HTML5 application. Despite searching on popular platforms like SO and Google, I have been unable to find a comprehensive solution for disabling all scrolling mechanisms entirely. Existing solutions seem to address specific scenarios such as disabling scroll with touches or arrow keys, or manipulating the behavior of the scrollbars themselves.
The primary reason behind this requirement is to create a hidden div below the visible screen and animate it upwards and downwards (a good example can be seen at MoonBase). This animation should remain concealed from the user's view, hence preventing them from scrolling down to reveal it. Is there any way to achieve this? Could using a meta tag or CSS help resolve this issue? Alternatively, should I consider revising my animation approach by animating the content from the side while utilizing the "width=device-width" meta tag? I wonder if this adjustment would provide me with the desired outcome.