Should scrollable block elements be used with mobile devices?

Question

I've got a user experience concern/issue. I've developed a mobile application (HTML5/CSS3) that's primary usage will be with tablet sized displays (iPads). Some of the "legal verbiage" (I'll call it the text from now on) that will be displayed to the users will be much longer than the screen height.

Question: Should I display the text in a scrollable block element (HTML5) or use a long page (4-5 times the device height) to display the text in it's full height.

I'm concerned that the display scrolling will be confusing and that the end users will not understand how to get to the bottom of the page where the final "Submit" button will be located (bottom-right).

Answer 1

Use a scrollable block section, with a clear difference between that segment and the page (background color) and have a separate scroll bar for that. This would work on tablets as they are wide enough to have the padding, but may not work as well on mobile devices.

Answer 2

I would go for the long page display. By introducing a scrollable container, you are opposing the interaction nature of mobile device (which is to scroll content). From here on, I'm going to refer the long page display as screen page.

I can easily think of 3 implementation issues with the scrollable block approach:

1. Given the screen height of tablet device varies, it would not be easy to set an ideal height for your block element.
2. Scrolling the container content within the screen page doesn't feel natural, it could even be frustrating. Users might end up scrolling the screen page instead. Workaround is to lock the screen from scrolling.
3. When you refresh the browser, the content in the scrollable block will always jump back to the beginning regardless how far you have scrolled. Compare this with a screen page which allows you to resume reading your content at the point before you hit the refresh button.