How to create a scrolling menu that scales to all screen sizes

So the basic idea is to have a two page menu. one on top of the other so you can scroll between them as if they are one big image. So the end result is I want a menu that is twice as long as the phones screen so I can have specific content on the top and on the bottom, with the ability to scroll between them. My way of doing this was to make the menu one scroll rect, set the panel height to twice the size of the screen and all my UI items on it in the proper place. This worked perfect when only working on one size screen. I want it to be responsive to all screen sizes and when that would happen everything would scale horribly wrong, since the aspect ratios are not all the same. What I would really love to be able to do, is have two separate canvas scalers working independently on two different canvas's that are on top of each other in a scroll rect, so the top and bottom content would never be on the screen at the same time.