Fullpage.js: Default scrollbars overrides scrolloverflow

Created on 30 Sep 2016 · 11Comments · Source: alvarotrigo/fullPage.js

When I have scrolloverflow set to true and one section is to big so it get the scrolling. With scrolloverflowoptions.scrollbars set to true a second scrollbar appears ontop of a default one. This is needed since other browsers doesn't have a default one showing.

I my case I want to manually scroll to the top of the section when it is loaded, so in afterLoad I get the scroll instance and do scroller.scrollTo(0,0,0). However this does scroll the "extra" scrollbar but not the default one. So if I for example come from the bottom and scroll up, it doesn't scroll to the top. The default scrollbar is still in the bottom and it seems that one takes precedence over the added one. I'm not sure exactly what's going on actually.

If I also set scrollabel.disable() I can see that the added scrollbar is not moving but the default one is still scrolling within the section.

I can't seem to reproduce in codepen, maybe because it's a webapp and not it's own website?

I'm using windows 10 and Chrome 53, But have testet on Browserstack with mac os El Capitan chrome 53 with the same result

question

Source

GustavSt

All 11 comments

Need more details of your initialization. Why do you have 2 scroll bars?
Why not using fp-auto-height if you are using scrollBar:true or autoScrolling:false ?

alvarotrigo on 30 Sep 2016

I think the scrollOverflow is the only relevant initialization I have. The thing is the content of each section is responsive, so viewing the website on smaller screen, still desktop, will case it to need the scrollbar within it. This is why I have the scrollOverflow plugin.

In the documentation it says I shouldn't overuse the fp-auto-height. I do have that for my footer, as it suggests is a fitting place to have it.

Honestly I don't know why the browser scrollbar appears, I thought with the scrollOverflow-plugin it wouldn't, that all would be handled with the plugin.

GustavSt on 30 Sep 2016

I think the scrollOverflow is the only relevant initialization I have.

But what matters is what I think about it, isn't it? :)

I'll close the issue. Without more data I can't help you more. I can only suggest you to use fp-auto-height-responsive.

alvarotrigo on 30 Sep 2016

container.fullpage(
    {scrollOverflow: true, 
    normalScrollElements: '#overlayModal', 
    bigSectionsDestination: 'top', 
    anchors: ['section1', 'section2', 'section3'], 
    responsiveWidth: 750, 
    afterResponsive: function(){..}, 
    onLeave: function(){...}, 
    afterLoad: function(){...}});

I see that .fp-scrollable has overflow: scroll. This seems to add a default browser scrollbar that has nothing to do with the scrolloverflow-plugin, and anything you do with the plugin is not related to this scroller. If I set it to visible, only the scrollOverflow-plugin is used for scrolling the sections.

Adding fp-auto-height or fp-auto-height-responsive didn't work that well. The sections get the scrollbars before responsive is kicked in.

GustavSt on 3 Oct 2016

I see that .fp-scrollable has overflow: scroll

It does not. See the CSS here.

alvarotrigo on 3 Oct 2016

Oh, I am actually using the .scss and that one does
Is the .scss not up to date/not supposed to be used?

GustavSt on 3 Oct 2016

Is the .scss not up to date/not supposed to be used?

SCSS is not a distributable file and therefore you should not be working with it unless you want to change it.
And yeah, it is not up to date. I work directly on the CSS file.

Feel free to provide an update for it or a fix for this existing typo. I have no experience with SCSS and have no time to deal with it now.

alvarotrigo on 3 Oct 2016

Ok! IMO in that case I don't think the .scss-file should be included when installing the package. It's just confusing if there is a sass file but the css is not based on it.

I am installing via npm and i believe it's the files-property in package.json that includes the .scss file when doing npm install. Currently i am removing the .scss file in a postinstall script on my end because it causes some issues with having both a .css and .scss file with the same name when importing within a .scss-file.

Maybe when installing via npm the dist-folder should be included as well? This would actually help me with choosing the right file.

I sorry but I have no real experience with contributing to open source projects, so I'm not sure what type of pull request that would be fitting in this case. Perhaps it could be a good idea for you to create a "discussion issue" of some sort where more involved people could discuss if moving from css to sass is a good idea or not.

Anyway, thanks for helping me track down the issue. The problem with the default scrollbar was due to me using the .scss instead of the .css.

GustavSt on 3 Oct 2016