Preventing scrolling on mobile devices:
const stopScroll = function(e) {
e.preventDefault()
}
Adding the listener:
document.body.addEventListener('touchmove', stopScroll, { passive: false })
Removing the listener:
document.body.removeEventListener('touchmove', stopScroll)
When testing in Chrome DevTools, it is observed that adding the listener successfully prevents touch scrolling. However, when attempting to remove the event listener using removeEventListener, it does not seem to work as expected even though chrome dev tools indicate the event has been removed. This functionality is being implemented within a Vue watcher:
watch: {
chatWindow(newValue) {
if (newValue) {
// add listener
} else {
// remove listener
}
}
}