question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is there a way to have a footer inside the scroll container, but outside the scroll element?

See original GitHub issue

Given the following structure

<div class="scroll-container">
<div class="scroll-element">
<-- body content -->
</div>
<div class="footer"></div>
</div>

Is there any way to have the footer scroll into view at the bottom as if it were in the scroll element? Due to the page templating system I’m using, it is problematic to move the footer and body content into another div.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
StevenStavrakiscommented, May 4, 2021

That seems to have worked in my particular use case. Having recently looked into scroll-jacking libraries, I can say that ASScroll has been the absolute best. Thanks!

0reactions
StevenStavrakiscommented, May 7, 2021

As for as I can tell, this issue no longer present in Firefox Developer edition, but persists in Chrome and standard Firefox.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Fixed header, footer with scrollable content
It works great for both known and unknown height elements. Make sure to set the outer div to height: 100%; and reset the...
Read more >
overscroll-behavior - CSS: Cascading Style Sheets | MDN
This is the inner container. Focus on this container, scroll to the bottom and when you reach the bottom keep scrolling. If you...
Read more >
How to keep your footer where it belongs ?
For a quick fix, you can absolutely position the footer at the bottom of the page. But this comes with its own downside....
Read more >
A Clever Sticky Footer Technique
Upon hearing “sticky footer” these days, I would think most people imagine a position: sticky situation where a footer element appears fixed ...
Read more >
position: sticky is Amazing
Sticky position is perfect for things like the iOS style list headings. Scroll the content and watch the headings stick once they hit...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found