The problem is each div can have a wildly different height based on content and the browser width (because of responsive image layouts).
I've done it on the divs because a) they are 'slices' from my CMS so it was easy, and b) because if the top of the div is visible on page load, there's no benefit.
I'm messing around with ResizeObserver and can remove the content-visibility once the element is rendered which fixes the issue after the initial scroll-down:
Awesome, making use of what we have for now.
Unfortionally it's a not stable function yet. I had this issue where it hides half my divs on my detail pages. :(
How do you handle the scrollbar?
Not sure what you mean by that?
On the auto setting it handles the load on scroll for you, or am I misunderstanding your question?
Here's my website with
content-visibility
on: 5f6c55859d590d0007b1d834--tillys-w...On the gallery page especially, watch scroll bar as you scroll up and down. It changes size and jumps about which is annoying
I see! interesting!
You can add the following property, which should be helping with the scrollbar issue:
Have a play around with that 250px it's whatever it shows upfront.
More info:
stackoverflow.com/questions/636515...
Another option could be wrapping those multiple divs into 1 big one just for the content-visibility? (Not sure, but thinking out loud)
The problem is each div can have a wildly different height based on content and the browser width (because of responsive image layouts).
I've done it on the divs because a) they are 'slices' from my CMS so it was easy, and b) because if the top of the div is visible on page load, there's no benefit.
I'm messing around with ResizeObserver and can remove the
content-visibility
once the element is rendered which fixes the issue after the initial scroll-down:(yes I'll unobserve everything
beforeDestroy
, this is just testing 😄)They aren't massive pages, so removing it isn't a problem after the initial load.
Awesome, making use of what we have for now.
Unfortionally it's a not stable function yet. I had this issue where it hides half my divs on my detail pages. :(
This version's a bit more stable: 5f6c7268798c4d000721ae4b--tillys-w...
I used the
ResizeObserver
above to work out an average height value for thecontain-intrinsic-size
too.A fun project, thanks for sharing this css trick!
That seems really great!
Scrolls nice