Fullpage.js: scrollOverflow blocks section scrolling after inner scroll

[rbosneag]

Description

When section content is taller than viewport and you activate scrollOverflow, after you scroll inside the section the down scroll is blocked for touchpad/mouse, however keyboard scroll and navigation clicks still work fine.

I noticed this right after switching to the long waited iScroll implementation.

Am I using it wrong or is this a real issue?

Link to isolated reproduction with no external CSS / JS

Isolated reproduction: https://jsfiddle.net/1kn0uqqq/2/

Versions

Tested on version 2.8.0 and 2.8.1 with Chrome and Safari on OSX

[alvarotrigo]

Your fiddle doesn't work at all. It seems main-content is breaking it.
See this reduced version.

Working as expected when replacing main-content for div:
https://jsfiddle.net/1kn0uqqq/4/

I'll close the issue until you provide a valid implementation to reproduce the issue.

[alvarotrigo]

After fixing your fiddle and removing all the unnecessary stuff you had on it, I was able to reproduce the error.

It seems to be a bug in iScroll.js regarding margin detection. But it seems it can easily be fixed by just adding overflow:hidden in the scroller element:

.fp-scroller{
    overflow:hidden;
}

Reproduction online

[rbosneag]

It seems the overflow:hidden; did the trick, _thanks_ for adding to dev and for the efforts to reproduce the bug.

Now, an old issue we still have: the inner scroll doesn't wait enough (doesn't snap) and it scrolls to the next section too quickly so you can't read the current section. In the past I was using a small trick suggested by @Canubiz here but hoped we might solve this somehow with iScroll.
Should I open a new issue for this?

[alvarotrigo]

Should I open a new issue for this?

Nop. The original issue still open: https://github.com/alvarotrigo/fullPage.js/issues/941
No solution was found for it.

[rbosneag]

I know you didn't agree with @Canubiz but his solution worked fine for me and I'm about to put it back but I have a feeling that we'll get new releases from you soon and I have to change it each time.

Maybe have an experimental flag (read _use it on your own risk_) to allow that kind of delay for inner scrolling?

[alvarotrigo]

As I said on the topic, that won't work on Apple laptops or kinetic devices creating a really bad experience for all those users.

I wouldn't add that to the library until a better solution is found.

[rbosneag]

I know you have a point and it's a good quality measure that we all appreciate!
Although, I work on a MacBookPro and it behaves as intended in my special case :)

I will close this issue now as the initial problem was solved.

[alvarotrigo]

Let's keep it open until merged in a new release.

[rbosneag]

ok!

_I will add comments on #941 as it appears on iOS 9.3.2 the snap is working great after switching to iScroll_

[NicolasJEngler]

The proposed solution using overflow: hidden on .fp-scroller does _NOT_ work if the last element has top or bottom padding/margin. Any ideas on workaround for this?

[alvarotrigo]

@NicolasJEngler can you provide a reproduction of the issue in jsfiddle or codepen?

[NicolasJEngler]

@alvarotrigo here it is http://jsbin.com/conasaxuho/edit?html,js,output, but weird enough as it is, I can't seem to reproduce it. It's only happening on my end so I'll assume it has to do with my code in particular.

I'm sorry, unless someone else can say this happens on their end too, forget what I reported.

[sifulbd]

Hi,

@NicolasJEngler which link you provide its not working on mobile devices properly.

@alvarotrigo is there any way to disable scrollOverflow: true on mobile devices?

Let me know.

Thanks

[alvarotrigo]

@sifulbd not yet, there's an open issue about it.

[sifulbd]

@alvarotrigo Any update or salutation?

[alvarotrigo]

@sifulbd just follow the issue I linked if you want to be informed of any change regarding it.

[sifulbd]

is there any way to destroy fullpage.js on mobile devices?
Like it will work on desktop and tab and disable on mobile?

[alvarotrigo]

@sifulbd check the docs, use the search in the forum or even look on google about it. It has been answer multiple times.

[sifulbd]

Its works for me.

` if( $(window).width() > 991 ) var scrollOverflow = true;
else var scrollOverflow = false;

    $('#fullpage').fullpage({
      scrollOverflow: scrollOverflow,
      css3: false,
      controlArrows: true,
      keyboardScrolling: true,
      scrollingSpeed: 700,
      autoScrolling: true,
      fitToSection: true,
      fitToSectionDelay: 1000,
      scrollBar: false,
      easing: 'easeInOutCubic',
      easingcss3: 'ease',
      anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage'],
      menu:'#nav',
      navigation: false,
      navigationPosition: 'right',
      responsiveWidth: 992,
    });`

[alvarotrigo]

Fixed in fullpage.js 2.8.2

[Tsukiyonocm]

Ive been trying to recreate the issue in a more simple area, but so far have been unable to recreate it without the use of margins added into the section.

Here is a link: https://sockeroo.netlify.com/

In order to recreate it, just open dev tools, pick a responsive mode ( I choose the galaxy s5 since its at top, but I believe any work). Then just reload the page and scroll down. The scroll gets stopped in the bootstrap card sections always on mobile.

I do run into the issue on larger sizes as well, though depends on how large the monitor is really.

Ive tried playing with the margins in the sections, ive tried the fp-scroller{overflow: hidden} (seems to be default now anyway. Ive run out of ideas on how to fix this and would love some help if anyone can offer.

Anyone offer any help or insight here? I will continue to try to figure out how to recreate it without all the added stuff. Im using Bootstrap 4.1.1 in addition to the overflow feature of fullpage.js, so not sure if its the two that are interacting?

[alvarotrigo]

@Tsukiyonocm this issue is closed.
Please open a new issue and 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.