Impossible layout with

`ResizeObserver`

@stivaliserna

The layout

Make it sticky!

.element {
  position: sticky;
  top: 16px;
}

Maybe two scrollbars

🤮

Or fixed buttons

y

x

z

Offset

x = y - z

ResizeObserver

new ResizeObserver((entries) => {
  const entry = entries.find(Boolean);
  if (entry?.contentRect) {
    const topOffset = Math.min(
      document.documentElement.clientHeight -
      	entry.contentRect.height -
      	SPACING,
      SPACING
    );
    entry.target.style.top = `${topOffset}px`;
  }
}).observe(summary);

to the rescue!

The result 👏

🔗 Check the code

@stivaliserna

Impossible Layout with ResizeObserver

By Stívali Serna

Impossible Layout with ResizeObserver

235

Stívali Serna