Expand my Community achievements bar.

SOLVED

Parallax Scroll Issue

Avatar

Level 3

I've been experimenting with implementing parallax scrolling on an element in a hand coded HTML article. It's just an empty div with a background image that moves a little slower than the subsequent divs on the page. The parallax effect is working as expected on desktop and on iOS Safari, but it does not work as expected within the DPS app. What I find is that the parallax background image doesn't move until I lift my finger off the screen, rather than moving while scrolling with my finger. Does anyone have any experience with this and possible solutions? Thanks!

1 Accepted Solution

Avatar

Correct answer by
Level 3

In case anyone else is having this problem, it seems that the DPS tech handles scroll events the way that iOS used to, not allowing the DOM to be manipulated until the end of the event (when you take your finger off the screen). iOS has handled scroll events in the proper way since iOS 8, but it seems like the DPS tech is still a bit behind. My solution uses iScroll (specifically their Probe script) to keep track of scrolling as it happens and trigger events on scroll, namely my simple parallax script.

Here's the link to the iScroll library: iScroll 5, smooth scrolling for the web

View solution in original post

1 Reply

Avatar

Correct answer by
Level 3

In case anyone else is having this problem, it seems that the DPS tech handles scroll events the way that iOS used to, not allowing the DOM to be manipulated until the end of the event (when you take your finger off the screen). iOS has handled scroll events in the proper way since iOS 8, but it seems like the DPS tech is still a bit behind. My solution uses iScroll (specifically their Probe script) to keep track of scrolling as it happens and trigger events on scroll, namely my simple parallax script.

Here's the link to the iScroll library: iScroll 5, smooth scrolling for the web