Buggish: Best way of handling when used in conjunction with another child that is scrollable and about the same height?

[atengberg]

Using React and Tailwind, I've got:

const PageLayout = ({ 
  title,
  children,
  additionalHeaderElements = null
}) => {
  const { top, onScroll } = useScrollTopOrNot();
  return (
    <section className="h-full w-full relative overflow-hidden" >
      <div className="h-full lg:container lg:mx-auto flex flex-col">
        <AnimateHeight
          style={{flexShrink: 0}}
          height={top ? 'auto' : 0}
          duration={250}
        > 
          <PageHeader title={title}/>
          {additionalHeaderElements ? additionalHeaderElements : null}
        </AnimateHeight>
        <div 
          className="w-full h-auto overflow-y-auto snap-y snap-proximity"
          id="scrollcontainer" onScroll={onScroll}
        >
          <div className="opaque-container w-full h-100% z-99">
            {children}
          </div>
        </div>
      </div>
    </section>
  );
};

However when children has slight more height than the scroll container's clientHeight, it creates a endless loop where when the animation triggers, the reduced height of AnimateHeight means the scrollable content no longer requires a scrollbar, which in causes the scrollTop (top) to reset to 0, which causes the scrollbar to reappear, when scrolled causes AnimateHeight to shrink and so on.

Is there a best / better way to handle this?

[Stanko]

Hi @atengberg, If you could please create an example on codesandbox (or any other live code sandbox) I would be very grateful. It is hard for me to debug the problem without it. If you can do that I think we'll able to find a solution. Cheers!

[atengberg]

Thanks for replying so quickly. I remade it and could not reproduce the issue, but in this version I hadn't used Tailwind.

When I have some more time I'll try including Tailwind and seeing if I can reproduce it.

[Stanko]

Thanks for the update. If you encounter the issue again, feel free to re-open this issue.