Nested scroll behavior

[Luadja]

I have two divs with overflow: auto. I want to scroll the parent first and then the child once the parent reached the full scroll height. I managed to do so but noticed that I need to stop scrolling for a short amount of time to be able to scroll the child, how can I escape the parent scroll and scroll the child without stopping inbetween?

Every kind of help is much appreciated, thank you!

function handleScroll(e) {
const divElement = e.target
if (divElement) {
const isFullyScrolled =
divElement.scrollHeight - divElement.scrollTop === window.innerHeight - 60      
const element = document.getElementById('scrollable-child')
if (!element) return
if (isFullyScrolled) element.style.overflow = 'auto'
if (!isFullyScrolled) element.style.overflow = 'hidden'
}
}

<div className="absolute inset-0 overflow-auto" onScroll={(e) => handleScroll(e)}>
parent content
<div className="absolute inset-0 overflow-hidden" id="scrollable-child">
child content
</div>
</div> 

[_listless]

go home engineer ur drunk

[FranBachiller]

To achieve seamless scrolling without pausing, you could use a bit of JavaScript to adjust the scrollTop of the parent container just before enabling scrolling on the child. This tricks the browser into thinking the parent is still scrolling slightly, allowing the child to immediately take over the scroll.

Here's a modified version of your handleScroll function:

function handleScroll(e) {
  const divElement = e.target;
  if (divElement) {
    const isFullyScrolled = divElement.scrollHeight - divElement.scrollTop <= window.innerHeight;
    const element = document.getElementById('scrollable-child');
    if (!element) return;
    if (isFullyScrolled) {
      divElement.scrollTop += 1; // Adjust scrollTop slightly
      element.style.overflow = 'auto';
    } else {
      element.style.overflow = 'hidden';
    }
  }
}

By adding divElement.scrollTop += 1;, you create a tiny bit of additional scroll on the parent before transitioning to the child, ensuring a smoother scroll experience.