Scroll overflow and the padding-top

[dbruening]

Hello,

I have a problem with the scroll overflow and the option padding-top.

If the content is not much bigger then the section, the scrollbar will not be displayes.
By scrolling back to top, the section content will be cut off the header.

Here is the codepen: https://codepen.io/reteid/pen/OqqOvg
The iframe is renderd on my montior displayed with 1920px x 472px.

Here are some pictures:

You see no scrollbar on the right, but more content could be shown.

By scolling back. The Headline is behind the header.

Steps to reproduce it

1. Scroll down to Section two
   • You see no scrollbar, but there could be more content to show.
   • If not, resize your window.
2. Scroll down to section three and again up to section two.

Thank you!

[alvarotrigo]

Thanks for reporting it!
I'll take a look at it!

[lawfulneut]

scrollOverflow doesn't seem to work correctly with paddings, fixed elements and 100% height values at all. When you try to drag browser window up and down, scrollOverflow fails to recognize new changes and just adds some paddings to a space left between fixed elements too. And it's kinda unpredictable - sometimes it goes back to normal when you resize window again and sometimes it just sticks with all that extra paddings. Still refreshing always makes it normal.
p.s. also I've noticed some buggy scrollOverflow interaction when I open developer tools in any browser - scrollbar doesn't appear.

[alvarotrigo]

@lawfulneut if you think there are other issues besides the one specified in this post, 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.

[StefanFrederiksen]

Having the same issue with this. Fixed elements and paddings seem to throw off the scrolloverflow when the section is just a bit larger than the screen.

Using version 2.9.4 baseline, and even tried upgrading to 3.0.4, but it did not fix it.

[lawfulneut]

Well, the thing is when I reproduce it in pen - it works fine, probably because content is minimalized and less complexed or it's just browser issue (mozilla). But anyway, I've already solved it by giving paddings to wrapper in css instead. Of course, scrollbar now falls under fixed elements, but it's a not a big problem i suppose if your content is not huge enough.

[alvarotrigo]

@dbruening the issue has been fixed in the dev branch scrollOverflow file.

Thanks again for reporting it!

[Venlious]

@alvarotrigo I believe this fix is incomplete. I was having the same issue as described here and tried out the dev branch fix and noticed a new issue. (Only applied changes from Fixed bug: scrollOerflow + verticalCentered + paddingTop)

When the content is vertically centred and a padding is applied, everything seems to work fine initially. However, once the site gets rebuild either by calling the .reBuild() function or by resizing the window, you'll notice that the content jumps around and switches between being centred as expected, and centred without respecting the padding.

I updated the original Codepen in this issue to use the dev branch of the Scrolloverflow and was able to repeat the issue. You can find this here: https://codepen.io/venlious/pen/KjZvRa

If unable to repeat, I also made a recording showcasing the issue.
https://voidvortex.com/share/f/2019-06-28_16-56-21.mp4

In case you believe this should be reported as a new issue, let me know. Thanks!

[alvarotrigo]

@Venlious thanks for reporting it!

Can you please try again with this file I just updated?

I believe it should be fixed now :)

[Venlious]

@alvarotrigo It appears like your latest changes have resolved this new and original issue. I have tested it both in my use case and on previously sent Codepen.

Thanks for your quick reply and fix!

[alvarotrigo]

@Venlious awesome to hear!

[alvarotrigo]

Merged into fullpage.js 3.0.6 which is now available! ⚡️ ⚡️