Can you change the width of a scroll bar (scrolling DIV) in IE7

Question

Hi

Is there any way to change the entire width of the horizontal scroll bar on a scrolling div (including the nudge arrows and the handle).

EDIT: I only need an IE7 solution - it's for a scrolling DIV on a touch screen terminal

Thanks

Matt

Answer 1

Actually, I revise my statement... in IE7, you CAN do some scaling.

<div style="zoom:5;font-size:20%;overflow-x:auto;">
  Hello World!       Hello World!       Hello World!       Hello World!       Hello World!       Hello World!       Hello World!
</div>

zoom tells IE to scale up the contents by 500%, and I've set the font-size to be 1/5 of normal (thus remain the same)... this scales the scrollbars (but it looks a bit ugly at this zoom, since the images are raster based, not vector based.

Answer 2

There is a way, but it's IMO not possible with JS or CSS.

If you have access to the terminal in question, you can set the theme property to have a larger scrollbar. It's at Control Panels -> Display -> tab Appearance -> Advanced -> item Scrollbar -> adjust size as desired (screenshot)

Answer 3

You may want to roll your own scrollbar - manipulating the position of the div that is being scrolled using Javascript. I've seen it being done with big "up" and "down" arrows on touchscreen applications before. Using this approach you can style the scrolling control however you prefer to match your design.

Here's a recent example that uses jQuery's slider to control a div.