Issue with iOS Homescreen Web Application:
My web application on the iOS homescreen works flawlessly, but I am facing a problem with bounce scrolling affecting fixed elements and site-related animations. I have managed to make inner div elements perform touch scrolling events with momentum and bounce style in iOS, which works perfectly. However, the bounce scrolling is causing issues with certain elements on the page.
When I attempted the following solution:
document.ontouchmove = function(e) {e.preventDefault()};
The issue of bounce scrolling stopped, but now the entire application became unscrollable.
What I'm Looking For:
I want the body to remain completely locked in place. Users should be able to scroll within certain designated areas without affecting the rest of the page. The content area should scroll smoothly without any bounce effect on the body or other fixed elements. Essentially, I need a scrolling content area with no scroll capability elsewhere on the page.
Summary: Body bounces during scroll. Seeking scrolling functionality within specific areas only, while keeping the body stationary.
In my research, I have come across several popular solutions for similar issues:
1 2 3
I wanted to mention this before anyone assumed I had not tried searching for a solution. Despite spending hours exploring different options, I wanted to highlight the most commonly recommended ones to avoid duplication of questions.