JSFiddle - React, Tailwind, and code Playground

HTML

<p>scroll down</p>
<div id="container" >
    <span>the content inside the ipad should scroll</span>
    <div id="inner">
        <img class="frame" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
    </div>
</div>
<p>scroll up</p>

CSS

p {

    padding-bottom: 670px;

}
#container {
    width: 40%;
    position: relative;
    height: 600px;
    overflow: hidden;
    
    margin-bottom: 690px;
}
.frame {
   /* position: absolute; */ 
    width: 100%;
    /* z-index: 100; */
}
 #inner {
    height: 558px;
    overflow: scroll;
    position: absolute;
    top: 14%;
    left: 38px;
    background: url("http://s11.postimg.org/xtwbnx937/ipad_content_660.png");
    background-size: cover;
}
/* .inner img {
    width: 92%;
    z-index: -100;
    background: url("http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png");
} */

JavaScript

//pageFeature.style.backgroundPosition = "0px " + parseInt(-y / 6) + 'px'); 

var element = document.getElementById('container').getBoundingClientRect();
var elementTop = element.top //distance from top 720;

// variable to stop function from being replayed on scroll when scrolling image
var isScrollingImage = false;

// disables scroll on body
var disableScroll = function() {
    document.body.style.overflow='hidden';
}
// enables scroll on body
var enableScroll = function() {
    document.body.style.overflow='auto';
}
//change position of background along y axis with scroll
var scrollImage = function() {
    console.log("called");
   isScrollingImage = true;
   var pageFeature = document.getElementById("inner");
   var pageFeaturePosition;
   pageFeature.style.backgroundPositionY=parseInt(-scrollY / 10) + "px";
    //if (background is scrolled to bottom) {
        enableScroll();
    //}
}

//when element gets to center of viewport and animation is scroll is not on element
//call scrollImage()
function checkPosition() {
    if (scrollY > 720 && !isScrollingImage) {
        disableScroll();
        scrollImage();
    }
    //isScrollingImage = false;
}

//once out of view port will have to bring the image back down, 
//scroll image will only happen on the way down

document.addEventListener('scroll', checkPosition);