Menu
I have a html canvas with mouse and touch events to draw on it.
I use css touch-action: none style on the canvas to disable scrolling on the device while drawing.
However it only works for non IOS devices. On any browser on an IOS device it still does a scroll/swipe action and makes it tough to draw correctly.
It almost seems to be an IOS feature. A web page that easily fits on the screen can still be scroll/swiped.
Any way to fix the issue?
366
The most straightforward way for disabling scrolling on websites is to add overflow: hidden on the <body> tag. Depending on the situation, this might do the job well enough.
There's another way to disable scrolling that is commonly used when opening modals or scrollable floating elements. And it is simply by adding the CSS property overflow: hidden; on the element you want to prevent the scroll.
To hide the scrollbar and disable scrolling, we can use the CSS overflow property. This property determines what to do with content that extends beyond the boundaries of its container. To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element.
After a year of having this problem myself, I finally managed to fix it.
Solution: Handle the touchstart, touchmove, touchend, touchcancel events, and call event.preventDefault(), ON THE CANVAS ELEMENT. If it bubbles beyond the canvas element, it will scroll.
Example:
var canvas_dom = // make this your canvas DOM element
canvas_dom.addEventListener("touchstart", function(event) {event.preventDefault()})
canvas_dom.addEventListener("touchmove", function(event) {event.preventDefault()})
canvas_dom.addEventListener("touchend", function(event) {event.preventDefault()})
canvas_dom.addEventListener("touchcancel", function(event) {event.preventDefault()})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
