Fullpage.js: normalScrollElements and fancybox not working as expected

Created on 7 Jun 2019 · 13Comments · Source: alvarotrigo/fullPage.js

I use fancybox and I need to enable scrolling inside it, when is modal opened, because I
used:
1) fullpage_api.setAllowScrolling(false); when is fancybox opened
2) fullpage_api.setAllowScrolling(true); when is closed
I tested multiple variants of setup your plugin, and I have issue when I put normalScrollElements: '.fancybox-container',
With this option I have 2 problems:
1) when mouse is over modal content, and if it is highest that window height - all works as expected - it scrolls. But in 90% casese modal content has width smallest that width of fancybox-container, and when I try to scroll - not works
2) after close modal, in 90% cases if before closed modal mouse was focused on non-scrollable area, scrolling of fullpage will not work, despite the fact that we have setted fullpage_api.setAllowScrolling(true);

DEMO VIDEO: https://youtu.be/wNl2vof6vEw

My question is - how to fix this? I finally finished work on the project, and this issue blew my brain because half the site becomes inaccessible.
Maybe exist variant to enable scrolling over full site area when is fullpagescrolling is disabled? maybe this will solve the problem
Thanks

bug fixed on dev

Source

7iomka

All 13 comments

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

Perhaps you might find useful to read my article regarding how to create isolated reproductions.

alvarotrigo on 7 Jun 2019

Codepen demo:
https://codepen.io/7iomka/pen/xNvVro?editors=1010
Demonstrated Issues:
1) It is not possible to scroll fancybox content when mouse is on backdrop area, it works only if is on content. How to fix that?
2) When you scrolling to the end and to the top of content, if you only once try to focus your mouse outside of content, when you closes fancybox - scrolling is disabled at all page content.
DEMO: https://youtu.be/RoHE9LVpFgM

7iomka on 8 Jun 2019

@7iomka can you please remove all Javascript code that is not the fullpage.js initialisation?
Leave only this:

const fullPageInstance = new fullpage('#fullpage-wrapper', {
            scrollBar: false,
            navigation: true,
            navigationPosition: 'right',
            css3: true,
            autoScrolling: true,
            // Custom selectors
            sectionSelector: '.js-main-slide',
            licenseKey: '',
            normalScrollElements: '.fancybox-inner, .fancybox-content, .fancybox-stage',
        });

alvarotrigo on 8 Jun 2019

@7iomka can you please remove all Javascript code that is not the fullpage.js initialisation?
Leave only this:

const fullPageInstance = new fullpage('#fullpage-wrapper', {
            scrollBar: false,
            navigation: true,
            navigationPosition: 'right',
            css3: true,
            autoScrolling: true,
            // Custom selectors
            sectionSelector: '.js-main-slide',
            licenseKey: '',
            normalScrollElements: '.fancybox-inner, .fancybox-content, .fancybox-stage',
        });

Yes, but in this case, you don't see issues, but see another problem - when you try to scroll content when mouse is focused on backdrop, you will slide fullpage scene instead of only scrolling content of fancybox like in example with clear fancybox demo.
https://codepen.io/7iomka/pen/NVQpYN?editors=1010

7iomka on 8 Jun 2019

I would usually recommend to use the modal callbacks (when open, when close) to call the fullPage.js methods setAllowScrolling(true) and setAllowScrolling(false). I'm not sure what was your problem using them, as you had code that could be interfering in the process and you didn't provide an isolated reproduction with the calls to setAllowScrolling and without the normalScrollElements option.

But here you have it working as expected with your own code:
https://codepen.io/alvarotrigo/pen/RzbJaX?editors=1010

In any case, I've came up with a better solution for the current implementation of normalScrollElements that should fix your issue without using setAllowScrolling. (Although I think it still fail sometimes...) Available now in the dev version 3.0.6.
https://codepen.io/alvarotrigo/pen/VJZdmO?editors=1010

Make sure to always use the parent element in the normalScrollElements option. In this case, you should be using .fancybox-container.

alvarotrigo on 10 Jun 2019

❤1

https://codepen.io/alvarotrigo/pen/RzbJaX?editors=1010

it's not true, it works with problem, sometimes, depended on mouse position where is in...

https://codepen.io/alvarotrigo/pen/VJZdmO?editors=1010

But this one is that, how need to be by default. Thanks for this! I think people will be grateful to you, because those who use the fancybox are a huge number of them.

7iomka on 10 Jun 2019

I currently have a very similar problem with that functionality:
In the fullpage view of that demo
https://codepen.io/alvarotrigo/full/VJZdmO

open the fancybox, scroll aorund, then close.
now it´s not possible anymore to scroll the page via touch pad.
Only after you click outside the browser or on the header bar, it works again as expected.

On my website I use a similar fixed positioned overlay. when opening the overlay and closing again without scrolling everything´s fine. only after scrolling the content of the overlay and closing, fullpage scrolling does not work anymore on touch screens. that´s bad!