Questions tagged [scrollbar]

A scrollbar is a graphical user interface element relating to a display which is only partially visible. The scroll bar provides visual feedback on which portion of the element is in view, and the ability to move the view of the main element.

Scrollbars are present in a wide range of electronic devices including computers, graphing calculators, mobile phones, and portable media players. Scrollbars are usually displayed one or two sides of the viewing area, containing a bar, that can be dragged along a trough (or track) to move the body of the document as well as two arrows on either end for precise adjustments.

Even though scrollbars and sliders work in similar fashion, their difference is that slider changes values, while scrollbar moves the area that is currently shown.

A simple example of SO editing textareas scrollbar:

SO Tag Wiki editing textarea scrollbar


2. Vendor Specific Values

2.1 Internet Explorer 5.5+

html{
    scrollbar-face-color:#ffffff;
    scrollbar-arrow-color:#ffffff;
    scrollbar-track-color:#ffffff;
    scrollbar-shadow-color:#ffffff;
    scrollbar-highlight-color:#ffffff;
    scrollbar-3dlight-color:#ffffff;
    scrollbar-darkshadow-color:#ffffff;
}

2.2 Webkit

::-webkit-scrollbar{
    width:#px;
    height:#px;
}
::-webkit-scrollbar-track{
    background:#ffffff;
}
::-webkit-scrollbar-thumb{
    background:#ffffff;
}

2.3 Gecko (MOZ)

It's worth noting that the attribute which controls whether or not scrollbars are displayed in Firefox is: (reference link)

Attribute: scrollbars Type: nsIDOMBarProp Description: The object that controls whether or not scrollbars are shown in the window. This attribute is "replaceable" in JavaScript. Read only

overflow: -moz-scrollbars-none

other valid values are -moz-scrollbars-horizontal and -moz-scrollbars-vertical.

6412 questions
836
votes
22 answers

Hiding the scroll bar on an HTML page

Can CSS be used to hide the scroll bar? How would you do this?
ANP
  • 15,287
  • 22
  • 58
  • 79
640
votes
16 answers

Make iframe automatically adjust height according to the contents without using scrollbar?

For example: I want it to be able to adjust its height according to the contents inside it, without using scroll.
akashbc
  • 6,415
  • 3
  • 14
  • 4
423
votes
16 answers

Custom CSS Scrollbar for Firefox

I want to customize a scrollbar with CSS. I use this WebKit CSS code, which works well for Safari and Chrome: ::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece { background-color:…
Dimitri Vorontzov
  • 7,834
  • 12
  • 48
  • 76
396
votes
10 answers

Automatic vertical scroll bar in WPF TextBlock?

I have a TextBlock in WPF. I write many lines to it, far exceeding its vertical height. I expected a vertical scroll bar to appear automatically when that happens, but it didn't. I tried to look for a scroll bar property in the Properties pane, but…
Bab Yogoo
  • 6,669
  • 6
  • 22
  • 17
367
votes
20 answers

CSS customized scroll bar in div

How can I customize a scroll bar via CSS (Cascading Style Sheets) for one div and not the whole page?
harisdev
  • 4,146
  • 5
  • 19
  • 25
325
votes
21 answers

How can I check if a scrollbar is visible?

Is it possible to check the overflow:auto of a div? For example: HTML
* content
JQUERY $('.my_class').live('hover', function (event) { if…
Peter
  • 11,413
  • 31
  • 100
  • 152
283
votes
9 answers

Hide html horizontal but not vertical scrollbar

I have an HTML textarea that is of fixed width, but variable height. I would like to set overflow:scroll and be able to show a vertical scrollbar, but not a horizontal one. I am not able to use overflow:auto due to other things specific to my…
William Jones
  • 18,089
  • 17
  • 63
  • 98
260
votes
9 answers

How do I make the scrollbar on a div only visible when necessary?

I have this div:
here is some text
The scrollbars are always visible, even though the text does not overflow. I want to make the scrollbars only be visible when necessary - that is, only…
Benubird
  • 18,551
  • 27
  • 90
  • 141
232
votes
20 answers

Prevent scroll-bar from adding-up to the Width of page on Chrome

I have a small issue trying to keep my .html pages at a consistent width on Chrome. For example, I have a page (1) with lots of contents that overflows the viewport's (right word?) height, so there's a vertical scroll-bar on that page (1). On page…
Acemad
  • 3,241
  • 3
  • 23
  • 29
219
votes
20 answers

Add a horizontal scrollbar to an HTML table

Is there a way to add a horizontal scrollbar to an HTML table? I actually need it to be scrollable both vertically and horizontally depending on how the table grows but I cannot get either scrollbar to appear.
Tsundoku
  • 9,104
  • 29
  • 93
  • 127
188
votes
25 answers

How can I get the browser's scrollbar sizes?

How can I determine the height of a horizontal scrollbar, or the width of a vertical one, in JavaScript?
glmxndr
  • 45,516
  • 29
  • 93
  • 118
184
votes
6 answers

How can I prevent the scrollbar overlaying content in IE10?

In IE10, the scrollbar is not always there... and when it appears it comes on as an overlay... It's a cool feature but I would like to turn it off for my specific website as it is a full screen application and my logos and menus are lost behind…
Jimmyt1988
  • 20,466
  • 41
  • 133
  • 233
172
votes
5 answers

Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink

WebKit/Blink's (Safari/Chrome) default behaviour on MacOS since 10.7 (Mac OS X Lion) is to hide scroll bars from trackpad users when they're not in use. This can be confusing; the scroll bar is often the only visual cue that an element is…
Jeremy
  • 1
  • 85
  • 340
  • 366
168
votes
6 answers

CSS scrollbar style cross browser

How can I define a CSS scrollbar style cross browser? I tested this code, it only works in IE and opera, but failed in Chrome, Safari and Firefox.