@bramus There is also `overflow-anchor` as covered...

@bramus There is also `overflow-anchor` as covered at CSS Tricks: https://css-tricks.com/books/greatest-css-tricks/pin-scrolling-to-bottom/

Here is a pen I made combining with another #CSS only trick to start the scroll from bottom with zero JavaScript:

https://codepen.io/Merri/pen/BagrowG

Like 20 August at 17:37 | Wall-to-wall | Open on mastodon.social

4 comments

Bramus

@MerriNet Checked this in detail and while it does work, it doesn’t seem to play nice in situations where the scroller goes from non-overflowing to an overflowing state (which could be considered a bug).

Also a pity that it requires an element (or generated content) that actually takes up space (i.e. `min-height: 1px`).

And finally no Safari support for this, unfortunately :-(

https://codepen.io/bramus/pen/GRbxOPX/f6627102553f568a71fec831498b2d6b

21 August at 13:39 | Open on front-end.social

Vesa Piittinen

@bramus Interesting, my pen works in Safari. So I tested a bit and `display: flex;` is what breaks it in Safari.

I don't have time to check if there is a bug report for Safari on this.

21 August at 13:47 | Open on mastodon.social

Bramus

@MerriNet Oh, I think we may be talking about two things here. Was talking about `overflow-anchor` which I used in that last demo I linked to.

21 August at 19:53 | Open on front-end.social

Vesa Piittinen

@bramus I'm talking about that. It works (stays in bottom also in Safari) once you remove `display: flex;` on the `#list` element.

21 August at 19:54 | Open on mastodon.social