JSFiddle - React, Tailwind, and code Playground

HTML

<div class="background">
    Background
  </div>
  <div id="parent" class="parent">
    Parent

    <p>
      the parent looks like a card that slides over the background
    </p>
    <div class="child">
      the child element does not have a defined height and can be very long
    </div>
  </div>

CSS

body {
  margin: 0px;
  padding: 0px;
  scroll-snap-type: y mandatory;
}

.background {
  background: skyblue;
  height: 90vh;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: -1;
}

.parent {
  position: relative;
  margin-top: -35px;
  background: white;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  -webkit-box-shadow: 0 0 32px 4px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 0 32px 4px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 32px 4px rgba(0, 0, 0, 0.25);
  padding: 32px 8px;
  height: calc(100vh - 100px);
  overflow: hidden;
}

.child {
  background: rgb(131, 58, 180);
  background: linear-gradient(0deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
  height: 300vh;
}

.overflow-scroll {
  overflow: scroll;
}

JavaScript

window.onload = function() {
	var parent = document.getElementById('parent');

  window.onscroll = function() {
     let documentHeight = document.body.scrollHeight;
        let currentScroll = window.scrollY + window.innerHeight;
        let modifier = 3; 
        if(currentScroll + modifier > documentHeight) {
        	console.log('bottom')
           parent.classList.add('overflow-scroll');
        } else {
        	parent.classList.remove('overflow-scroll');
        }
  };
};