I implemented a workaround to achieve "position:fixed" on mobile devices, specifically my Android device. This involved creating two divs with heights that combined to match the screen height through JavaScript, and adding touch listeners to the bottom div. These events would then adjust the scrollTop value, mimicking the functionality of an old script called "touchScroll.js."
While this setup allowed for successful scrolling with a sling feel, the overall experience was quite choppy compared to the smooth scrolling behavior of the OS. In an attempt to address this issue, I tested various CSS solutions such as using "-webkit-backface-visibility:hidden;" and "-webkit-transform:translate3d(0,0,0);" on different elements like the div itself, the body, or a combination of both, but none proved effective. Instead, these tricks interfered with the keyboard appearing in input fields.
Another approach I explored was creating an internal div within the scrolling container and adjusting its position by setting it to "position:absolute" and modifying its top property instead of manipulating the scrollTop value. Unfortunately, this strategy did not eliminate the choppiness.
Given these challenges, I am seeking advice on resolving the choppy scrolling issue. Any suggestions or solutions would be greatly appreciated.
For reference, you can view an example here: