search

alvarotrigo / pagePiling.js

pagePiling plugin by Alvaro Trigo. Create a scrolling pile of sections. http://alvarotrigo.com/pagePiling/
4.1k stars 653 forks source link

Pages wont change sometimes on the phone #213

Closed aoljaca closed 3 years ago

aoljaca commented 3 years ago

If you go here https://www.andrejoljaca.com/#about on your phone, sometimes the scrolling doesn't work and you have to use the hamburger icon to switch between pages, how do I fix this?

I tried normalScrollElementTouchThreshold: 1, touchSensitivity: 10,

but it did not work.

It works when I scroll in the responsive mode set to iPhone in the chrome browser and works when I refresh the page and then scroll on the phone.

Thanks

alvarotrigo commented 3 years ago

Can you please provide an isolated reproduction in jsfiddle or codepen, with no CSS or JS files external to pagePiling.js and the minimum amount of HTML code? Use empty sections unless strictly necessary for the reproduction.

aoljaca commented 3 years ago

Like this: https://codepen.io/aoljaca/pen/RwGZRVM

I haven't done this before so I am not 100% sure if I did what you said right

I was thinking of making my own scroll mechanism using scroll top with jquery. Is this a good idea? The best would be for pagepiling to be able to do it.

If I just click on the URL and then scroll it seems to work on the phone. I don't know why it only works then.

And it works when scrolling down

It seems to always work on the last page, maybe it has something to do with the padding. The last page is the only one with pp-table

The issue seems to be with pp-scrollable

aoljaca commented 3 years ago

I cant seem to find a solution. Any ideas?

aoljaca commented 3 years ago

How does pagepiling sense when you are on top of the page and scrolling up or down? Maybe this way I could edit it

alvarotrigo commented 3 years ago

Like this: https://codepen.io/aoljaca/pen/RwGZRVM

Not really. You have to make sure your pagePiling.js effect works on codepen too. Import the css/js files and make sure it works there.

aoljaca commented 3 years ago

I got it to work by changing it so when you are at top of the page overflow y is set to none and this way the user cant scroll down and it works fine. Then I turn it back to overflow y scroll after one second to make sure the user can still scroll back down if needed. The issue was with the bounce/rubber-band effect on the iPhone. If anyone needs the code let me know.

alvarotrigo commented 3 years ago

Glad you managed to solve it! :)