Temporarily stop page scroll and scroll element instead?

I am trying to create a scrolling effect on a page where by the user scrolls down the page until a section appears with a mobile/tablet in the centre of the screen and the page scrolling stops momentarily and scrolls to the bottom of the content on the screen before resume scrolling down the page.

I've attempted to mock up how this would work. I believe main issue is that the content is going to need to be placed in a container inside of the tablet frame. I was hoping I could add a scroll trigger to the content which then disables the page scrolling temporarily. To add an extra layer of difficulty I am using OxyExtras hotspots in Oxygen Builder on the content and there is a background image on the full section.

Any help would be greatly appreciated.

1 reply