Scrolling of 2 lists with one "somehow" fixed
Sorry I can't name this better.
So I've got two lists. There's a very long one on the left and a short (initial smaller than screen height) on the right.
And I want to achieve the behaviour that the right list moves with the global scrolling but stops when it's bottom basically reaches the page bottom AND if you scroll to the other direction it's top hits the page top (so the basic position: sticky; top: 0; in this case) while the left list always keeps scrolling
Both lists are in a grid with 2 columns (could also be flex - I use the col system of vuetify and didn't really look into it).
Is there any CSS magic which can do this?
Both lists can get longer / shorter during runtime by altering them (adding / removing things, collapses, searches...) so measuring them out by JS is not the way.
14 Replies
You can measure dimensions of elements during runtime using https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
But I would have to do it on every event which are like 20 or so.
you don't need to recalculate the height at all https://codepen.io/jochemm/pen/poGJwNy
I don't think there's a CSS only way to achieve what you want, not if they both need to scroll at the same time
Well I also thought of kind of this solution - but is there a way to hide the scrollbars?
I updated the codepen
Hmmm... yes I'm currently trying also a js approach. But in your example you've got to scroll to whole left list up that the right one moves finally also. I try it with scrollBy... not an easy problem 😉
yeah, overriding default behavior like this is always tricky
this is basically what twitter does right? Maybe dive into their source
looks like they do calculate the height (set it as min-height on wrapper) and depending on scroll direction they set the bottom or top sticky position (height wrapper - window height)
that is a good call. There's a recent thread where someone was building a twitter clone, and Z had a pretty good solution https://discord.com/channels/436251713830125568/1160359470879227966
Hard birth: https://codepen.io/Christian-Lorenz/pen/jOdPmjN
nice!
But still buggy (if you change the scroll direction in "the middle" and go down again) - but I guess that's the way to go if there's no CSS solution. Just need a better check for if you're go down.
@Jochem @MarkBoots Finally made it
https://codepen.io/Christian-Lorenz/pen/jOdPmjN
very nice!