Fancybox with scroll doesn't work

[taraskhvyl]

Description

When open modal with height bigger than height of screen, scroll in fancybox popup doesn't work on desktop and mobiles.

Link to isolated reproduction with no external CSS / JS

https://codepen.io/taras-khvyl/pen/BqzXpw

Steps to reproduce it

1. Click "Open modal" on the first screen
2. Can't scroll in popup on desktop and mobile

Versions

Windows 10 [Google Chrome v.69.0.3497]
Android 8.0.0 [Google Chrome]

[alvarotrigo]

Try placing it inside the fullpage wrapper and using the option normalScrollElemens.

[taraskhvyl]

@alvarotrigo i changed demo. Now it works on desktop, but doesn't work on mobiles correctly.
Scroll on mobile enables when i touch once a popup

[alvarotrigo]

Try using normalScrollElements: '.fancybox-container' instead.

[taraskhvyl]

@alvarotrigo the same bug :(

have updated demo

[alvarotrigo]

Try adding the fancybox element inside the active section instead.

[taraskhvyl]

Doesn't work

Updated

[erickmendezz]

Hi, I am using full page 3.0 and fancybox v3 first and then I've tested with fancybox v2, in both when it shows fancybox I cant scroll in fancybox, instead of page behind scrolls to other sections but not large content in fancybox.

used these:
$.fn.fullpage.setAllowScrolling(true);
$.fn.fullpage.setAutoScrolling(false);

when fires fancybox to avoid scroll on page sections, but dosn't work, any idea?

//others comment
I've tried do my own modal, position fixed above entire page, testing still scroll in page content, but not in my modal :(

[alvarotrigo]

Doesn't work

Testing it on Chrome dev tools with the touch mobile view seems to work as expected now.

[taraskhvyl]

https://codepen.io/taras-khvyl/full/BqzXpw/ - tested in incognito mode with touch mobile view. Doesn't work. Scroll works only after you touch opened popup. But right after opening popup scroll doesn't work

[alvarotrigo]

Scroll works only after you touch opened popup. But right after opening popup scroll doesn't work

You mean right after closing it?

[taraskhvyl]

No. After popup opened scroll doesn't work. But after you touch once on popup on any place (not close) scroll works fine.

[taraskhvyl]

any ideas on it ? :(

[alvarotrigo]

I'll have to take a look with more calm.
It seems to be working totally fine for me on Chrome dev tools.

I click the link. It opens the popup. I click and drag. It moves up and down.

[taraskhvyl]

i recorded short video. when i move up/down i am clamping a mouse and scroll doesn't work. after i click on popup and it works

[taraskhvyl]

upd: now after closing popup fullpage sections scroll doesn't work

[taraskhvyl]

any updates?

[alvarotrigo]

Nop. Haven't looked again at it yet.
I'll give it another try in about 3 weeks. I'll be away a few days now.

[alvarotrigo]

The issue should be fixed now in the dev branch 3.0.4.
Reproduction online: https://codepen.io/alvarotrigo/full/zMJwzg/

It will get merged for the next release 3.0.4

[alvarotrigo]

Now fixed in fullPage.js 3.0.4!

[ValentinGenev]

@alvarotrigo, good day, thanks of all the awesome work you're putting in!

I'm facing the following problem both in the CodePen demo you shared and in the project I'm working on while I'm in mobile environment:

After closing the FancyBox popup I can't use the drag or the mouse scroll to change to another section (I get stuck on the section with the popup). To paraphrase it, the scroll works as intended inside the popup but stops working for the sections the moment I close the popup. I can change the sections with the keyboard's arrows or anchors.

Cheers and best of wishes! :)

[alvarotrigo]

@ValentinGenev you said:

I'm working on while I'm in mobile environment:

But then you mention:

I can change the sections with the keyboard's

or the mouse scroll to change to another section

I'm confused.

[alvarotrigo]

You would also need to provide device details, OS and browsers in which you are having the issue..

[ValentinGenev]

Thank you for the reply and apologies for the confusion.

I'm running in the mentioned issue on an Android 4.2.2 device with Chrome (version: 71.0.3578.99) and on the Chrome (72.0.3626.109 (Official Build) (64-bit)) on my PC (Windows 7 Ultimate), where I use the mentioned keyboard arrows.

I'm testing while the Chrome's DevTools device toolbar is toggled. I managed to reproduce similar behavior in Firefox (65.0.1 (64-bit)) too; where I use the Responsive Design Tool. In that last case the issue manifests itself as inability to change sections with the mouse scroll (since there isn't drag function or I don't know how to activate it).

I hope I cleared most of the confusion. I'm aware that the mobile device I'm testing on is very old and the other environments are simulations at best so I hope this is more of an isolated case.

Thanks again.

Edit: Some more context in this gif: http://sitesandbox.eu/general/scroll_example.gif

[alvarotrigo]

Can you reproduce your issue on the codepen provided in the first message of this topic?

[ValentinGenev]

Yes, I can and I tried on both my phone and my PC using Chrome (the mentioned versions).

[alvarotrigo]

I'll then re-open the issue.

[alvarotrigo]

This issue is related with #3576 and it has been solved on the dev branch.

It will get merged in fullpage.js 3.0.5.

[alvarotrigo]

This issue has been fixed in the latest fullPage.js release 3.0.5!