You can actually use clip-path to cut some space from the scrollable area while scrolling.

const headerArea = document.getElementById('header');
const scrollableArea = document.getElementById('scrollable');

const headerAreaHeight = headerArea.offsetHeight;

windows.addEventListener('scroll', () => {

    const scrollableAreaTop = scrollableArea.getBoundingClientRect().top;
    scrollableArea.style.clipPath = `inset(${headerAreaHeight - scrollableAreaTop}px 0 0 0)`;

});

p.s. Inspired by that answer https://stackoverflow.com/a/62162491/1078641