Jump to content
Search Community

Can't reach bottom of page footer after adding ScrollSmoother

ViVO Digital test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi all!

 

I notice I'm unable to scroll to the bottom of pages wrapped in ScrollSmoother. A #smooth-content container wraps everything except a fixed header and custom cursor. I've modified one of my existing pens to demonstrate this. Please help me understand what I've done wrong.

 

Appreciate you!

 

Edit - Pen didn't save, BRB!

Edit - Okay, pen has been updated. Note that the footer contains text at the bottom.

 

Chris - ViVO

See the Pen BaPVoWj by chrisandrew_dev (@chrisandrew_dev) on CodePen

Edited by ViVO Digital
Updated demo pen
Link to comment
Share on other sites

  • Solution

You've got a collapsing margin issue (CSS). It looks like you set a margin-top on the first child of the #smooth-content container, so it's throwing everything off and pushing the top of the container down. You can escape the collapsing margin by either setting a 1px transparent border-top on #smooth-content or do something like this: 

#smooth-content {
  padding-top: 1px;
  margin-top: -1px;
}

Does that clear things up? 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

On 2/10/2023 at 1:46 PM, GreenSock said:

It looks like you set a margin-top on the first child of the #smooth-content container, so it's throwing everything off and pushing the top of the container down.

 

Hi Jack,

 

Yep, swapping out hero section margin-block for padding-block (in the real project) fixed it right up, thanks a bunch!

 

Chris - ViVO

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...