How to scroll the hovered div using CSS when two divs are placed one over the other in mobile?

Question

I have a situation where there are two divs
Yellow div and Red div as shown in the below figure

Case 1:
User scrolls on Yellow div, only the contents of yellow are scrolled. (Works as expected)

Case 2:
User scrolls on Red div, only the contents of red are scrolled. (Works as expected)

Case 3:
When the scroll on Red div is complete, then on further scrolling the contents of Yellow div start scrolling.

I need to actually lock the scroll of yellow div when the user's touch is on red.
Any suggestions?

Answer 1

Capture the on hover event of red div and lock the scroll of yellow div

$("#redDiv").hover(function(){
     $("#yellowDiv").css("overflow-y","hidden");
});