VueJS disable outer div scroll and enable again after inner div reached its bottom

I’m doing a webpage with multiple div which placed vertically, and here’s my concept:

1. When the scrollbar reached the first div bottom, the outer scrollbar will be disabled and enable the second scrollbar
2. The user have to reach the inner scrollbar bottom in order to enable the outer scrollbar

I tried to found the name as wells as the sample from the Internet, but I can’t really found what I want. So I would like to request any volunteers to help me about my concept.