<body>
<div class="container" style="overflow-y:scroll, width:100%,height:500px">
<div class="overFlow" style="width:60%,height:"1000px,background-color:red,display;flex,align-items:center,justify-content:space-between">
</div>
<div class="formCContainer" style="width:40%">
<form>
<label style="width:100%">
<input placeholder="enter your name" type="text/>
</label >
<label style="width:100%">
<input placeholder="enter your password" type="password"/>
</label>
<button typle="submit">Submit</button>
</form>
</div>
</div>
</body>
在上面的代码中可以看到，我在body标签下定义了三个div：第一个div的宽度为100%，高度为500px；第二个 div 是第一个 div 的子元素，具有 60% 的宽度和 1000px 的高度，导致它溢出；最后一个 div 有 40%。现在我希望当用户滚动时，他们首先完成滚动 div.overFlow，然后在完成之后，他们能够滚动 body。我尝试了很多方法在 Google 和 ChatGTP 上找到解决方案，但我无法将它们存档。请帮助我。
请帮我处理 JavaScrip 代码，请不要包含 jQuery