Here's my problem. I have one view on our web app that needs just a list to scroll, not the entire page. The rest of the views need the entire page to scroll. I have no idea what to do.
The old version of our app currently has a table view for this alphabetical list and when you click on a row, it drills down to another page. We are moving towards a cascading list and I have this problem where we have different scrolling behaviors on different pages.
What's the best practice here?
I get the feeling that the tabbed content on the right of your mockup is more important than the scrolling list on the left so why not use the gmail pattern of keeping the list of filters/labels fixed to the left (and they scroll independently as needed)
In your example, I would assume the list on the left shrinks as the user filters/searches suppliers. If all the items fit then there is no need to show the scroll thumb. If there are more items off the bottom of the screen then a scroll thumb appears...
In cases where the loaded content is a known fixed size then loading it inline might be more clear to users...
Option 1: Scroll the page and fix the details area.
See this effect in action here and here, where the header is fixed to the top of the page when the content is scrolled beyond a specific amount.
Option 2: Use the page's natural scrollbars to affect only the list.
Similar to facebook newsfeed or timeline, where you can scroll the page using the page's natural scrollbars. The content area & left pane scroll up and down (loading extra content as necessary), but the header & right pane stay fixed and do not scroll.
Both these options will allow you to view any row in the list, while keeping the details area on the right always visible. Clicking a row on the list can affect the content in the details area without refreshing the page.
