Continuing from my previous tutorial, about creating a horizontal scrollable region using HTML and CSS. We can see that creating a horizontally scrollable region isn’t too hard, but the end result is rather basic, and has some minor issues. In particular, the size of the scrollable area was hardcoded and as a programmer, hardcoding is usually grounds for a public flogging. Besides the hardcoding, visually, it doesn’t look great, because the scrollbar is not proportional to the true width of the scrollable region. Of course, if you know how many items will be in your scrollable region, then you can calculate the width before hand, and then hardcoding isn’t so bad. But if you are working on an application, you might not know until after the page is rendered. So, how do we attempt to fix this?
Most web pages don’t really require the need to be wide, in fact most web pages are deliberately designed to fit within a maximum of 1000 pixels or less. The main reason is to maintain content within the viewable area of the screen, making the assumption that the base level of systems would support a screen that is 1024 pixels wide. Now, even though a computer screen is typically wider than tall, it’s more natural for a web page to extend downward indefinitely and web browsers can handle vertical scrolling, without much effort. Of course, there are times when you want to create a cool user interface that calls for a horizontally scrolling navigation bars of some kind. It sounds easy enough right? But as life would have it, trivial things sometimes turn out to be difficult. One easy way to create a horizontal region is to use an iFrame, but iFrames are not really within the same space as your web page, since, well, it’s a frame, and a completely separate html document. The ideal, would be to use DIV tags, and keep the structure completely within the same page.