Gary技術隨手記

資料來源：How to Create a Scroll Bar using CSS

How to Create a Scroll Bar Using CSS

A frequently asked question is how to create a box with a scroll bar for displaying content. Okay, I'll tell you, but first I have to rant a bit. I just hate those little scrolling boxes. Now this is just my opinion and it's a gross over generalized one at that, but I believe that most people who want this functionality simply don't understand how web pages work. They design some lovely layout in an image editor with beautiful graphics on the left, right, top, and bottom. Everything is sliced to perfection. Now, when they start adding real content to the page, it starts pulling the graphics apart. You can read more about the exploding tables phenomenon in my rant about spans.
Since they don't understand how web pages work, they believe that, instead of fixing the page to properly display the content, they should limit the size of the content by creating a scroller. This just makes the site harder to use. Printing becomes a problem because only the visible portion of the scroller's content prints. In some browsers, the mouse wheel will not scroll the content properly. And the poor users wind up with multiple scroll bars if their browser window isn't large enough to display the full page, which just leads to a confusing interface. In almost all cases, this is simply bad web design.
Okay, I feel better now. <smile>
You can use CSS to create a scrollable box. Consider this source code:

<div style="width: 190px; height: 190px; overflow: auto; padding: 5px">
      content in here
   </div>

Here is what that would look like and try to imagine reading this article if the entire text were in that little box:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent tempus rutrum wisi. Proin dui libero, tempor non, mattis nec, imperdiet a, nulla. Nunc hendrerit, metus eget sodales interdum, ipsum felis lacinia elit, vel bibendum nunc ligula ac wisi. Donec vitae neque. Nam quis ante ut est viverra aliquet. Vestibulum dui. Phasellus ultricies elit nec nibh. Sed pede tortor, tincidunt a, vestibulum id, posuere quis, eros. Vestibulum quam. Nullam augue. Nullam eleifend turpis a augue. Aenean vestibulum. Quisque et velit eu diam consequat nonummy. Nullam volutpat enim et pede.
Fusce pretium. Sed sodales arcu eu nulla. Nunc dapibus dui nec tortor. Ut hendrerit dolor sit amet pede. Proin sit amet lorem. Vestibulum quis ligula. Quisque leo libero, pharetra at, porttitor at, mollis imperdiet, magna. Donec venenatis neque quis arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut enim nibh, euismod et, gravida id, euismod et, lacus. Praesent consectetuer velit non neque. Nulla vehicula, arcu tincidunt vehicula ullamcorper, neque sapien iaculis ipsum, sit amet suscipit mi pede vitae augue. Cras tempor, arcu molestie porta pharetra, pede ipsum faucibus nisl, sit amet eleifend urna ante vel nibh. Cras egestas bibendum mauris. Etiam sit amet risus a magna sagittis faucibus.
In ante. Nunc aliquet tincidunt sem. Morbi vestibulum lectus eget tortor. Integer volutpat. Mauris vitae erat quis neque tempor faucibus. Duis mattis. Duis nec magna. Aliquam tristique mattis lorem. Morbi gravida. Nunc malesuada velit id enim. Nullam sit amet dolor eget orci dignissim imperdiet. Morbi viverra neque vitae magna. Sed nonummy. Sed nunc risus, dignissim consectetuer, hendrerit vel, dapibus at, risus. Mauris id neque sit amet augue pretium blandit. Sed sit amet nunc. Sed fermentum tristique nibh. Proin pellentesque tincidunt risus. Aenean erat. In blandit aliquam massa.

That's all there is to it. You can put this in the body of a page, or you can place it inside another container, like a table for example. If you have a good valid reason for using a scroller, use it. If all you're doing is protecting a flawed design, consider fixing the design.