A simple solution is to set a fixed max height on your iframe content and make it scrollable. That’s not a perfect solution, since it does not work well with different browser window heights.
A more complex but better solution would probably be an intersection observer. By using the approach that I have explained here, you would observe multiple invisible containers to determine what size of the iframe is currently visible. You would put the actual contents of your iframe into a separate container that is made scrollable using overflow: auto and fix its height to the visible height of the iframe returned by the intersection observer. Let me know if you want to try out this approach and need any help.