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

[StevenStavrakis]

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.

[ashthornton]

Hi @StevenStavrakis, there is some functionality that isn't documented at the moment which allows you to target multiple elements to translate within the scroll container. If you add data-asscroll to elements you wish to scroll it should achieve what you're looking for. You can change the selector if you wish like so:

const asscroll = new ASScroll({
    innerElement: '[data-scroll]' or '.scroll-element' etc.
})

Here's a codepen example: https://codepen.io/ashthornton/pen/13a5d813f7635121e789b84999b73b52

[StevenStavrakis]

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!

[ashthornton]

You're welcome @StevenStavrakis :)

[StevenStavrakis]

One note: there seems to be some desync between the border of the two different elements causing a white flickering line while scrolling. For now, it isn't a problem, but a consideration.

[ashthornton]

There's nothing I can think of that I could implement on the ASScroll side to fix this, it's a quirk of sub-pixel rendering on the transform. It would be down to the user to make sure background colours are on an outer element or adding box-shadow to cover the gap for example.

[StevenStavrakis]

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