I recently added a parallax effect to the hero section of my website, and while it works perfectly on desktop, I encountered some scrolling issues when viewing it on mobile or tablet devices. Sometimes the scrolling behaves as intended, and other times it doesn't scroll at all. Although I can't confirm if the problem is directly related to the parallax effect, that would be my initial assumption.
Below, you'll find a snippet with all the code I used. What I'm seeking assistance with is understanding why the scrolling behaves oddly on mobile and tablet devices, and how I can either resolve this issue or gain insights on how to fix it.
Additionally, I have a "scroll to top" feature implemented with a button that appears when scrolling down, but since incorporating the parallax effect, its behavior has become erratic. The button sometimes shows up and sometimes does not, and when it does appear, clicking on it triggers some strange double scrollbar behavior which may be connected to the aforementioned scrolling issue. (Note: These problems only occur on mobile and tablet devices, not on desktop).