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.
No description
14 Replies
Joao
Joao•13mo ago
You can measure dimensions of elements during runtime using https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
bibamann
bibamann•13mo ago
But I would have to do it on every event which are like 20 or so.
Jochem
Jochem•13mo ago
you don't need to recalculate the height at all https://codepen.io/jochemm/pen/poGJwNy
Jochem
Jochem•13mo ago
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
bibamann
bibamann•13mo ago
Well I also thought of kind of this solution - but is there a way to hide the scrollbars?
Jochem
Jochem•13mo ago
I updated the codepen
bibamann
bibamann•13mo ago
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 😉
Jochem
Jochem•13mo ago
yeah, overriding default behavior like this is always tricky
MarkBoots
MarkBoots•13mo ago
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)
Jochem
Jochem•13mo ago
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
Jochem
Jochem•13mo ago
nice!
bibamann
bibamann•13mo ago
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
Jochem
Jochem•13mo ago
very nice!
Want results from more Discord servers?
Add your server