safari show scrollbar always css

How to Fix iOS Scrollbar Always Visible with CSS

The scrollbar is an important element of the user interface that allows users to navigate through a long list or content on a web page. In iOS devices, the default behavior of the scrollbar is to hide it when the user stops scrolling.

However, in some cases, it may be necessary to keep the scrollbar always visible to improve the user experience. In this article, we will discuss the issue of iOS scrollbar always hiding and provide solutions to fix it using CSS.

Why iOS Scrollbar Not Always Visible?

The issue with iOS scrollbar is that it hides automatically when the user stops scrolling. This behavior may cause usability problems for some users, especially those with visual impairments. If the user cannot see the scrollbar, they may not be able to find the content they are looking for, leading to frustration and a poor user experience.

How do I make the scroll bar always visible in CSS?

To fix the issue of the iOS scrollbar hiding, we can use CSS to force the scrollbar to always be visible.

There are several methods to achieve this, including the use of -webkit-scrollbar CSS properties, JavaScript, and custom scrollbar libraries.

Method 1: Using -webkit-scrollbar CSS Properties

The -webkit-scrollbar CSS properties are a set of properties that allow you to customize the appearance of the scrollbar. To keep the scrollbar always visible on iOS devices, we can use the following CSS code:

In the above code, we set the width and height of the scrollbar, the background color of the scrollbar track, and the color and border radius of the scrollbar thumb. We also set the minimum height of the scrollbar thumb to 50px to keep it always visible on iOS devices.

Method 2: Always Show Scrollbar on Safari iOS 13

If you are using the iOS 13 and want to apply the scrollbar on specify div then this method is perfect for you. We will utilizes the -webkit-appearance property to achieve the desired effect.

The HTML code consists of two div elements. The outer div element has a class of scrollbar , and the inner div element has a class of scrollbar-child .

To customize the appearance of the scrollbar, we use the ::-webkit-scrollbar , ::-webkit-scrollbar-track , and ::-webkit-scrollbar-thumb pseudo-elements to target various parts of the scrollbar.

We set the width and height of the scrollbar, the height of the track, and the background , border-radius , and box-shadow of the thumb to achieve the desired look.

Method 3: Using JavaScript

Another way to keep the scrollbar always visible on iOS devices is to use JavaScript. The following code demonstrates how to achieve this using jQuery:

In the above code, we use the scroll event to detect when the user is scrolling. We then set the -webkit-overflow-scrolling and overflow-y CSS properties of the body element to ‘auto’ and ‘scroll’, respectively, to force the scrollbar to always be visible. Finally, we reset the scrollTop property to maintain the scroll position.

Method 4: Using Custom Scrollbar Libraries

There are several custom scrollbar libraries available that allow you to customize the appearance and behavior of the scrollbar, including keeping it always visible on iOS devices. Some popular libraries include PerfectScrollbar, SimpleBar, and OverlayScrollbars.

In this article, we discussed the issue of the iOS scrollbar always hiding and provided solutions to fix it using CSS. We demonstrated three methods to achieve this, including using -webkit-scrollbar CSS properties, JavaScript, and custom scrollbar libraries. By keeping the scrollbar always visible, we can improve the user experience and make it easier for users to navigate through long lists or content on web pages.

You Might Be Interested In:

Ashfaq Ahmed

Ashfaq Ahmed is a freelance WordPress developer and owner of codeconvey.com. I developed modern and highly interactive websites. I always focus on improving my development and design skills.

Leave a Comment Cancel reply

iOS 14 and browser scroll bars (webkit)

Accepted reply.

🤌 👁👄👁🤌 < BUT WHY ?

Sheeeesh! really!?!?!?!

Does anyone have a solution for this, then? How can we implement a non-custom scroll on iOS?

We would like to show the scrollbar all the time as we have a scrollable table and touch inputs tend to select cells/rows of that table rather than allowing for a scroll.

How to fix the invisible scrollbar issue in iOS browsers

The page scrollbar in web browsers serves a useful function: The vertical position of the scrollbar thumb tells the user where they are in the page (their scroll position), while the size (height) of the scrollbar thumb tells them roughly how long the page is. Because scrollbars are useful, they should be clearly visible.

On Apple’s platforms, most notably on iOS, the page scrollbar is placed inside the viewport and laid on top of web content. In some cases, this can result in a poor contrast between the scrollbar thumb and the page background beneath it. One website that has this problem is WebKit Blog . The page scrollbar on that website in iOS browsers is almost completely invisible.

I assure you that there is indeed a scrollbar present in the above screenshot, but don’t worry if you can’t spot it. Even a person with perfect vision could probably not say with certainty that they can see a scrollbar in that image. Let’s zoom in to take a closer look at this supposed scrollbar, and maybe we’ll manage to actually see it this time.

The contrast ratio between the scrollbar ( #fbfbfb ) and page background ( #f7f7f7 ) is 1.03:1. This is only a smidgen above the theoretical minimum of 1:1 (no contrast), which is what you get if you compare a color to itself. For all intents and purposes, the scrollbar is invisible.

The invisible scrollbar problem is not specific to iOS. It affects Apple’s other platforms as well. However, macOS users can fix this issue by setting the “Show scroll bars” option to “Always” in system settings (in the Appearance section), which causes the scrollbar to be placed in a separate “scrollbar gutter” outside of the viewport in the browser. There is no such option on iOS, so it’s up to the website to ensure that the page scrollbar is clearly visible.

Websites that are affected by the invisible scrollbar problem can fix this issue by adjusting how they apply CSS background colors to the page. In the future, it will be possible to fix this issue by coloring the scrollbar via the CSS scrollbar-color property, which currently isn’t supported in Safari. Apple has expressed support for this property , but the implementation in WebKit is blocked on a limitation in lower-level frameworks on Apple’s platforms.

Note that the non-standard CSS ::-webkit-scrollbar pseudo-elements are not supported on iOS, so they cannot be used as a fallback for the scrollbar-color property on that platform.

What is causing the invisible scrollbar

On WebKit Blog, the header and footer have a dark background, while the main content on the page has a light background. The website achieves this by applying a dark background color to the <body> element and a light background color to the <main> element.

Since the header and footer don’t have their own background color, they are transparent (in CSS, the background-color property defaults to the transparent value), so the <body> element’s dark background is visible through them, resulting in the following appearance:

The page scrollbar in web browsers on Apple’s platforms can have a light and dark appearance. The operating system automatically chooses the scrollbar appearance based on the background colors of the web page. Since WebKit Blog sets a dark background color on the <body> element, the system assumes that the page is mostly dark and chooses the light scrollbar appearance, resulting in an invisible scrollbar against the <main> element’s light background color.

How to fix this issue

The fix is rather simple. In order to get a dark scrollbar appearance, the page should avoid setting a dark background color on the <html> or <body> elements. In the case of WebKit Blog, the dark background color should be applied directly to the <header> and <footer> elements, while the light background color can be applied to the <main> element or the <body> element (either works).

I should note that this fix can affect the overscroll effect in some browsers. On WebKit blog, when the user scrolls to the top of the page, the overscroll animation creates an impression that the page header is being stretched. In Safari on macOS, this effect is preserved after applying the fix, but in Chrome it isn’t (I filed a Chromium issue for this).

Some people may see this as a (minor) degradation in aesthetics, but I think that an invisible scrollbar is a much bigger problem for users, and websites should prioritize usability over elegance.

Wanna learn CSS from a course?

FYI, we have a full CSS learning path with multiple courses depending on how you want to approach it.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

How to make scrollbar visible all the time in iOS

Hello. I wonder if it is possible to have the scrollbar visible all the time when you have a scrollable text?

I’m making an app for iPhone or Android and would like to show the viewer that the text is scrollable

Create some custom CSS and use overflow-y: scroll; see: https://www.w3schools.com/code/tryit.asp?filename=FFHZWXYX9QGR

Or what is it that you exactly want to achieve?

This requires programmation which I am not really good at. What would the code needed be and where should I put it?

a no programming solution is also available. see: overflow_demo.hype.zip (49.3 KB)

Hello Vic. In the example you sent me the scrollbars aren’t not always on, I want them to be visible as soon as my scene hit the screen

I want a scroll bar beside my scrollable text all the time

Is that possible to achieve?

You mean even when there is no need for a scrollbar? I’m happy to help but I’m not sure what you exactly want. Can you draw up an example perhaps?

This way the reader would know that there is more text in that page. Am I clearer?

Yes! However, iOS ‘hides’ the scrollbars by default (its part of their Human Computer Interaction Guide) so my guess would be that your problem lies herein.

A quick search on Stack Overflow shows that there aren’t a lot of quick fixes. You can try an external JS-lib (jqueryUI for instance or iScrol: http://cubiq.org/iscroll-5 ) but this requires knowledge of coding.

Another solution would be to use a simple visual cue to show that the user can scroll, for instance a small arrow or ‘scroll for more’ text.

I do think you need to code to fit a more complex solution. You want to override basic iOS behaviour which, in my experience, is a pain in the butt.

I already have this iscroll js script

var myScroll = new IScroll(’ #wrapper ’, { mouseWheel: true, scrollbars: true });

Wouldn’t it be possible to put a line in there so the scrollbar are always visible?

http://iscrolljs.com/#scrollbars

fadeScrollbars: false perhaps? I can’t test this for you right now (I’m not in the office anymore), but give it a go.

If iScroll doesn’t provide a solution, this seems to work (with a working demo): http://simurai.com/blog/2011/07/26/webkit-scrollbar

However it requires some CSS skill, it’s probably not that complex, I can setup a demo for you tomorrow.

Thanks Vic, waiting to ear from you tommorow

I fixed it, I think.

Preview: https://oneuppedgames.com/clients/hype/iosscrollbars/ Download: https://oneuppedgames.com/clients/hype/iosscrollbars/iosscrollbars.hype.zip

It’s a small piece of CSS you need to add to your project, this is rather easy:

go to Document in your inspector

click on Edit Head HTML

paste the following code beneath the <meta name=“viewport”… line:

Also make sure your div or paragraph has the proper styling:

• select textbox or paragraph
• go to Metrics in your inspector
• select Auto Scrollbars in the Content Overflow

Best of luck!

Hello Vic. It is perfect, you nailed it!!! Thanks

• Privacy Policy
• @TumultWhisk
• Support Portal
• Documentation
• Tumult Store
• Education Store

Designing for “Show scroll bars”

In macOS, users have the ability to set when they want to see scrollbars in windows. This affects all windows in the operating system, including in web browsers. They have three choices:

• Automatically based on mouse or trackpad
• When scrolling

Which means you are either in a state where you see them all the time, or a state where you only see them once scrolling has been started through some other means.

The Always option is pretty straightforward. If the window needs scrolling, the scroll bar will be there. If not, it won’t be. If the scrollbar is there, it squishes the page inward to make room for it. Here’s an example where a page goes from needing scrolling to not needing it with the Always setting on:

This is different than the When scrolling option, in which the scrollbar overlaps the content. Here’s an example of that:

These screenshots are the reason I was thinking about this at all. We had a user write in at CodePen because they couldn’t click that notifications icon. Before I added some extra space to prevent that overlapping, some coverage was possible:

Exacerbated by the fact that this user would zoom out, making the target even smaller, to the point it would be totally consumed:

This is only really a consideration with clickable things hugging the right side of the page. If it’s ever a problem for you, adding some padding over there is likely good enough. Or make the clickable area not confined to that narrow of a target. Here in the WordPress admin, some overlap is possible, but the clickable area is big enough that it doesn’t matter:

Good info. It might also be good to note the behavior for the default setting Automatically based on mouse or trackpad since this might show up more frequently than the others.

When using only the trackpad the scrollbar will behave like the overlap example. However, as long as there’s a mouse that’s not recognized as a trackpad, the scroll bar will behave like the always present setting.

I haven’t used a magic mouse recently, so I’m not sure how that behaves particularly but it might be another thing to consider. Though at this point they’re just edge cases.

Also note that viewport units includes scrollbars (when set to always) – causing horizontal scroll if you have an element with a set width of 100vw.

happy new year everyone :-)

Wow, that is fascinating. We’ve somehow missed that in our UX testing.

I don’t get it… I always override the browser scrollbars with jQuery nicescroll on scrolling elements (it sets overflow to hidden).

https://gist.github.com/Lewiscowles1986/d6339f0b33aa3871b947110c4ee70fb6

Sure users can drink the settings bleach, OS’s can harm, Browser vendors can try to help and end up harming, but it’s your site. At some point you also need to say “this isn’t my problem, I’m trying to change the weather or control the sun.”

Of course with JS and CSS you can and should take control where possible to enhance, but it’s not always our responsibility.

Ugh… sorry to say, but I instantly leave any site that uses that awful scroll-hijacking custom scrolling thingy. It feels so off and unnatural. It’s really replacing a small problem with a disaster.

Exactly as efraim said. Using jQuery nicescrolls gives the worst possible user experience. It doesn’t even come close to responsivnes of the default system scrollbars. Apples trackpad fires scroll events many times faster than a mousewheel and the nicescrolls plugin cant handle that.

Agreed, js scrolling always feels “off” to me.

Of course with JS and CSS you can and should take control where possible to enhance, but it’s not always our responsibility.

Custom scrollbars do the complete opposite of “enhance”. For example, surely you’ve realized how sluggish your site feels, right? It’s those custom scrollbars.

Just use SimpleBar guys :) https://github.com/Grsmto/simplebar

The number of people this catches out, also when you show them how having a trackpad or magic mouse makes them vanish!

One thing worth knowing if you want to use a media query is js, assuming you’re also using modernizr, modernizr.mq ( https://modernizr.com/docs#modernizr-mq ) will get the correct width (with or without scrollbars) whereas $( window ).width(); will not.

Also, Modernizr has a check for hiddenscroll which you can use to offset things hugging the right side of page.

Yes we should all completely redesign our sites because of a dumb implementation of an optional feature. Because of course Apple can do no wrong, so it is the websites that need to change.

Remember that on mobile devices scrollbars usually appear only when actively scrolling. You just can’t give for granted the classic behavior anymore.

Even on mobile devices you can still tap on something on the very edge though. The macOS scrollbars are a flawed design on Apple’s part.

Sorry to say, but this I redequlis, I have use macOS in over 6 years and I never have trouble with that

I view any very custom modifications to the browser (like this) to be a temporary fad on the internet. For example, IE5 (yes, I am an old timer) allowed coloring of the scrollbars.

I love that Macs pushed the USB port forward (remember parallel ports?) and so many other tech. But they also pushed a 1 button mouse at us at the same time. sigh

This is equivalent to the 1 button mouse. I hate that the scrollbars are so dang hard to use with that setting. And anyone that uses it will run into the same problems that 1 button mice users have. And eventually function over form will win.

If you are the kind of person that has to have form over function, then maybe it’s just fine that some things don’t function properly for you, and maybe eventually your frustration will push you back to the function side of things. (1 button mouse/colored scrollbars)

Popular Articles

• Html Css Inline (Nov 07, 2023)
• Css In Form (Nov 07, 2023)
• Ellipsis Css (Nov 07, 2023)
• Css Web Form (Nov 07, 2023)
• Css Word Break (Nov 07, 2023)

CSS Scrollbar

Switch to English

Table of Contents

Introduction

Understanding css scrollbar, customizing scrollbars with css, hover effect, tips, tricks, and common mistakes.

• Scrollbars are crucial user interface elements that enable users to navigate through content that doesn't fit on the screen. With the advent of Cascading Style Sheets (CSS), a language used for describing the look and formatting of a document written in HTML, web developers have been given the ability to customize the appearance of scrollbars, aligning them with the overall design of the webpage.
• By default, every browser provides a scrollbar that appears when the content of an element exceeds the dimensions of the element. However, these default scrollbars might not always align with the aesthetics of your webpage. This is where CSS scrollbar properties come into play.
• CSS offers a set of properties that allow you to style the scrollbar according to your needs. These properties include --webkit-scrollbar, --webkit-scrollbar-button, --webkit-scrollbar-track, --webkit-scrollbar-thumb, --webkit-scrollbar-track-piece, --webkit-scrollbar-corner, and --webkit-resizer.
• To customize the scrollbar, you need to use the ::-webkit-scrollbar pseudo-element. This pseudo-element represents the scrollbar itself.
• The above code will make the scrollbar 15 pixels wide.
• Next, you can style the scrollbar track (the path in which the thumb slides) using ::-webkit-scrollbar-track pseudo-element.
• The above code will change the scrollbar track's color to light grey.
• Then, you can style the scrollbar thumb (the draggable scrolling handle) using ::-webkit-scrollbar-thumb pseudo-element.
• The above code will change the scrollbar thumb's color to grey.
• You can also add a hover effect to the scrollbar thumb using the ::-webkit-scrollbar-thumb:hover pseudo-element.
• The above code will change the scrollbar thumb's color to dark grey when the mouse pointer hovers over it.
• Always remember that the CSS scrollbar properties are non-standard and not part of the official W3C CSS specifications. They are currently only supported in Webkit browsers like Chrome and Safari.
• When styling the scrollbar, ensure that it remains functional and user-friendly. A poorly designed scrollbar can hamper the user experience.
• One common mistake is to design the scrollbar thumb in such a way that it blends with the track, making it difficult for the user to see the thumb. Always choose contrasting colors for the thumb and the track.
• Don't make the scrollbar too thin. A thin scrollbar might look aesthetically pleasing but it can be difficult to use, especially for people with motor disabilities.
• CSS provides a powerful way to customize the appearance of scrollbars, thereby enhancing the overall design of your webpage. However, while styling the scrollbar, always prioritize usability over aesthetics to ensure a smooth and enjoyable browsing experience for the users.

How TO - Always Show Scrollbars

Learn how to always show scrollbars with CSS.

How To Force / Always Show Scrollbars

Add overflow: scroll; to show both the horizontal and vertical scrollbar:

To only show the vertical scrollbar, or only the horizontal scrollbar, use overflow-y or overflow-x :

Tip: To learn more about the overflow property, go to our CSS Overflow Tutorial or CSS overflow Property Reference .

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

Styling Scrollbars with CSS in Most Modern Browsers

The CSS scrollbar property is not standard.  Chrome, Safari, and Microsoft Edge use the WebKit engine with the -webkit-scrollbar prefix pseudo-element for styling scrollbars.  Firefox also allows styling with a few options, including scrollbar width and color.

Below, we'll talk about how to create custom CSS scrollbars for your website using rules for WebKit browsers, namely Google Chrome and Microsoft Edge.

• What is a Scrollbar?

Most websites today include more content than can fit in the client area of a browser window.

A scrollbar is a graphical tool that allows users to navigate web page's contents in their entirety.

There are two types of scrollbars:

• Vertical scrollbars :  Used to navigate up and down on your web page.  This is the most common type of scrollbar used on web pages.
• Horizontal scrollbars :  Used to navigate left and right on your web page.  Not very common unless your pages navigate sideways instead of up and down.  This can be confusing in a lot of cases and doesn't work well for responsive design and mobile user experiences.

Scrollbars can either be controlled by clicking and dragging with your mouse cursor, rotating your mouse wheel, or with the up and down arrows on your keyboard.

Scrollbars are not limited to just the browser's client area.  Tables, div's, and other HTML elements can contain scrollbars for navigation within their content areas, as well!

• Styling Scrollbars with CSS

This can be accomplished by using a set of pseudo-elements. There are many combinations of pseudo-elements, selectors, and properties you can define to customize them any way you want.

The best part is it's extremely easy once you get the hang of all the different parts that make up a scrollbar, and you won't have to create any additional HTML code containing scrollbar elements for these CSS rules to work since they're actually part of the browser window, not the web page.

The scrollbars are displayed according to whatever CSS properties you set for them. By default, the browser will show a scrollbar container on the right side of the browser window and will be disabled if the content doesn't stretch past the length of the screen.

Here's a graphical representation of the anatomy of a scrollbar:

Now, let's dive into each of the pseudo-elements and their customization possibilities. As mentioned previously, this will work for Google Chrome and Microsoft Edge browsers.  This will also work in Safari desktop browsers with the -webkit prefix.  We'll discuss Firefox a bit later.

The below code samples will use the same CSS rules from the image you saw above so you can get a clear understanding of how the CSS pseudo-elements and properties tie together visually and written out.

• Styling Scrollbars with ::-webkit-scrollbar

The entire scrollbar container. Here, you can determine the width of a vertical scrollbar container and height of a horizontal scrollbar container. You can define both sizes in a single definition:

• Styling Scrollbar Buttons with ::-webkit-scrollbar-button

The buttons of the scrollbar. The scrollbar buttons are not shown by default in most modern browsers but are something you can add for extra navigation control. The user can click one of these buttons to move a small amount of pixels up or down the screen.

The buttons were a feature more prominently used in the old days of internet browsing. Scrolling is more easily accomplished with the scroll wheel on your mouse nowadays, but the option is still available for websites that wish to show the extra controls.

You can either configure the buttons to display a single up and down button in the scrollbar: The up button above the scrollbar thumb, and the down button below it:

Or you can customize to have the up and down buttons grouped together, once above the scrollbar track, and once below it:

Additionally, you can add arrows to your scrollbar buttons so users know how to navigate through your content. The below code snippet shows an example of how you can scroll using an up and down button in a vertical scrollbar using simple CSS definitions:

Each of the values in the border-color property represents a side of the button in which you want to show a different color. Square buttons will show a triangular arrow if you specify a color in a single side, like in the code sample above.

• Styling Scrollbar Thumbs with ::-webkit-scrollbar-thumb

The draggable scrolling handle. If you click and hold this handle with your mouse cursor, you can drag the scrollbar thumb up and down in a vertical scrollbar, or left and right in a horizontal scrollbar, and the page will scroll with the movement of your mouse. Releasing the mouse button will stop the scroll animation.

• Styling Scrollbar Tracks with ::-webkit-scrollbar-track

The track of the scrollbar. This acts as a progress bar, showing how far down, or across, in the web page you are.

In this portion of the scrollbar, we'll simply set the background color so we can differentiate the actual draggable scrollbar node from its background track:

• Styling Scrollbar Track Pieces with ::-webkit-scrollbar-track-piece

The part of the track that's not covered by the thumb. I generally set this to the same color as the web page like the code snippet below. But it's your site that you're building, so play around with this and do what's best for your design aesthetic.

• Styling Scrollbar Corners with ::-webkit-scrollbar-corner

The bottom-right corner of the scrollbar, where both vertical and horizontal scrollbars meet.

Since I generally don't allow horizontal navigation on any of my websites (I just feel it's bad design practice to do so), I generally hide this from view. But you can also set it to any background color you like:

• The Resizer Pseudo-Element: ::-webkit-resizer

The draggable resizing handle that appears in the bottom-right corner of some elements, like textarea elements. The styling for this works similarly to the ::-webkit-scrollbar-corner pseudo-element, so the same example above should work here, as well.

• Scrollbar Pseudo-Class Selectors

You can dive deeper into each of the pseudo-elements rules by adding additional pseudo-class selectors. We used a few of these in the examples above, so let's break down each of the options available:

• :horizontal - CSS rules defined in this pseudo-class will apply to any scrollbar features that contain a horizontal orientation.
• :vertical - CSS rules defined in this selector will apply to any scrollbar features that contain a vertical orientation.
• :decrement - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not the view's position will be decremented (up on a vertical scrollbar, and left on a horizontal scrollbar).
• :increment - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not the view's position will be incremented (down on a vertical scrollbar, and right on a horizontal scrollbar).
• :start - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not the objects will be placed before the scrollbar thumb.
• :end - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not the objects will be placed after the scrollbar thumb.
• :single-button - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not a single button will appear above and below the scrollbar track. Up and down buttons for vertical scrollbars and left and right buttons for horizontal scrollbars.
• :double-button - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not a group of buttons will appear above and below the scrollbar track. Up and down buttons for vertical scrollbars and left and right buttons for horizontal scrollbars.
• :no-button - This pseudo-class applies to scrollbar track pieces only and indicates whether or not buttons will appear above, below, or next to the scrollbar track, depending on the scrollbar's orientation.
• :corner-present - This pseudo-class indicates whether or not the scrollbar corner will be present.
• Styling Scrollbars in Firefox

Firefox doesn't have any advanced styling methods like Google Chrome or Microsoft Edge browsers.  However, you're still able to customize scrollbar width, as well as thumb and track color.

• scrollbar-width : Sets the width of the scrollbar.  The default vault is auto .  You can also set this to thin for a much thinner (almost invisible) scrollbar.
• scrollbar-color : Here, you set two hexadecimal color values.  The first value is the scrollbar thumb color, and the second value is the scrollbar track color.

Here's an example showing the two properties in action.

Note that the properties are wrapped in an html element selector. This is standard for Firefox scrollbar styling. If you want to styling specific elements with a horizontal or vertical overflow, then you can do so by changing the element selector to your liking.

• Hiding Scrollbars with CSS

You can also hide a browser window or child container's scrollbars with either of the following CSS rules:

overflow-x hides the horizontal scrollbar and overflow-y hides the vertical scrollbar.

To hide both vertical and horizontal scrollbars within a container with only one line of code, you can use the overflow property:

In this example, you've learned how to style scrollbars using CSS with a variety of different examples broken down into each piece of the scrollbar element.

Experiment and have fun with it! There are a lot of different styling methods you can use for scrollbars with CSS, and playing around with the different pseudo-classes, selectors, properties calls for a whole new level of excitement with CSS.

Daniel Porrey

Add a comment, table of contents.

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

::-webkit-scrollbar

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The ::-webkit-scrollbar CSS pseudo-element affects the style of an element's scrollbar when it has scrollable overflow.

The scrollbar-color and scrollbar-width standard properties may be used as alternatives for browsers that do not support this pseudo-element and the related ::-webkit-scrollbar-* pseudo-elements (see Browser compatibility ).

Note: If scrollbar-color and scrollbar-width are supported and have any value other than auto set, they will override ::-webkit-scrollbar-* styling. See Adding a fallback for scrollbar styles for more details.

CSS Scrollbar Selectors

You can use the following pseudo-elements to customize various parts of the scrollbar for WebKit browsers:

• ::-webkit-scrollbar — the entire scrollbar.
• ::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards that scroll one line at a time).
• ::-webkit-scrollbar:horizontal{} — the horizontal scrollbar.
• ::-webkit-scrollbar-thumb — the draggable scrolling handle.
• ::-webkit-scrollbar-track — the track (progress bar) of the scrollbar, where there is a gray bar on top of a white bar.
• ::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle.
• ::-webkit-scrollbar:vertical{} — the vertical scrollbar.
• ::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet. This is often the bottom-right corner of the browser window.
• ::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some elements.

Accessibility concerns

Authors should avoid styling scrollbars, as changing the appearance of scrollbars away from the default breaks external consistency which negatively impacts usability. If styling scrollbars, ensure there is enough color contrast and touch targets are at least 44px wide and tall. See Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1 and Understanding WCAG 2.1 : Target Size .

Styling scrollbars using -webkit-scrollbar

Adding a fallback for scrollbar styles.

You can use a @supports at-rule to detect if a browser supports the standard scrollbar-color and scrollbar-width properties, and otherwise use a fallback with ::-webkit-scrollbar-* pseudo-elements. The following example shows how to apply colors to scrollbars using scrollbar-color if supported and ::-webkit-scrollbar-* pseudo-elements if not.

In the example below, you can scroll the bordered box vertically to see the effect of styling the scrollbar.

Specifications

Not part of any standard.

Browser compatibility

Css.selectors.-webkit-scrollbar.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

css.selectors.-webkit-scrollbar-button

Css.selectors.-webkit-scrollbar-thumb, css.selectors.-webkit-scrollbar-track, css.selectors.-webkit-scrollbar-track-piece, css.selectors.-webkit-scrollbar-corner, css.selectors.-webkit-resizer.

• scrollbar-width
• scrollbar-color
• Don't use custom scrollbars (2023)
• Scrollbar styling on developer.chrome.com (2024)
• Styling Scrollbars on WebKit.org (2009)

• How to create
• Add Button on Image
• Center Button Element
• Previous Next Button
• Social Media Button
• Styling Search Button
• Create Text Button
• Round Button
• Create Icon Button
• Style Download Button
• Styling Outline Button
• Create full-width Button
• Change HR Color
• Change Placeholder Color
• Change Bullet Color
• Change Color on Hover
• Circular Images
• Change image on scroll
• Add form to image
• Fixed Social Media Icon
• Create Icon Bar
• Image With Transparent Background
• Add Visual Effects
• Responsive Modal
• Text Block on Image
• Responsive Grid Image
• Blur Background Image
• Create Thumbnail Image
• Align Images
• Responsive Image
• Add Image Border
• Center Image
• Background Image
• Opacity to Background
• Vertical Image
• Position Text on Image
• Change Image
• Auto-resize Image
• Stretch Image
• Create sub-menu Navigation
• Dropdown To Navbar
• Dropdown Hide/Show
• Hoverable dropdown
• Add Search To Navbar
• Horizontal Navbar
• Styling Header
• Vertical Menu
• Styling Dropdown
• Create Fixed Menu
• Center Align Navbar
• Curtain navigation
• Create Breadcrumb
• Always Show Scrollbar
• Centred Table
• Two Div Side By Side
• 2 Columns Grid
• Sticky Footer
• 3-Column Layout
• Responsive Table
• Create Card
• Create Profile Card
• Create Different Shapes
• Create Pagination
• Create Responsive Blog
• Equal Height Columns
• Mixed Column Layout
• Styling Label
• Responsive iframe
• Empty Circle
• Center Website Horizontally
• Hamburger Icon
• Create Divider
• Media Query Breakpoints
• Animated Search Box
• Responsive Testimonial
• Horizontal Scroll Menu
• Create Sticky Elements
• Create Start Rating
• Create About Us Page
• Responsive Typography
• Create Glow Text
• Create Flip Card
• Create Chatbox
• Maintain Aspect Ratio
• Set Div Height
• Responsive Webpage
• Create Register Form
• Center Links in Navbar
• Create Timeline
• Create Responsive Checkout
• Responsive Login Form
• Div Height 100%
• Div Inside Border
• Hide Scrollbar
• Div Overlay
• Center Div Align
• Disable Links
• Remove Outline
• Text Shadow
• Parallax Scrolling
• Style hr Tag
• Styling Contact Form
• Styling Radio and CheckBok
• Styling Scrollbar
• Display if Hover
• Create Preloader
• Styling Toggle Button
• Create Tooltip
• CSS ClearFix
• Styling Download Link
• Change Cursor
• Align Div Center
• Align Div Bottom

How to always show scrollbars with CSS?

The Scrollbars are used to scroll through the contents of the webpage which are larger than the available display area. The scrollbar is used to provide horizontal and vertical scrolling.

The scrollbar is usually added only for large content which does not fit the display. But we can also show scrollbar in spite of content size.

In this tutorial, we will learn to always show scrollbars with CSS

Always show scrollbars

To show the scrollbars always on the webpage, use overflow: scroll Property. It will add both horizontal and vertical scrollbars to the webpage.

To add only horizontal scrollbar use overflow-x: scroll property and for vertical scrollbar use overflow-y: scroll property.

Example: Always show scrollbar with CSS

In this example, we have used overflow: scroll to show scrollbar vertically as well as horizontally.

Here is the output of the above example.

Example: Show only vertical scrollbar

In this example, we will only show vertical scroll using CSS overflow-y: scroll property.

Example: Show only horizontal scrollbar

In this example, we will only show horizontal scrollbar using CSS overflow-x: scroll property.

In this tutorial, we have learned to always force the scrollbar to show. It can be done using overflow property. We can choose the option to show both horizontal and vertical scrollbars or only one scrollbar. All three situations are shown with examples.

• ← Create Breadcrumb ← PREV
• Centred Table → NEXT →

Always show a vertical scrollbar in Firefox, Chrome, Safari and Opera

Firefox, Chrome, Safari and Opera by default only show vertical scrollbars if the content on the page is longer than the window whereas Internet Explorer always shows vertical scrollbars. When moving from page to page where one is short and the next long it can make the layout jump around a bit so this post shows how to fix this for the other browsers.

The Solution

To save you having to scroll down and search for the answer I’ll present it here first and then show some examples of what I’m talking about. This works in Firefox versions 1.5+ and for the current versions of the other browsers (I haven’t tested the others in older versions).

This first screenshot shows a short page which doesn’t require vertical scrollbars because the content doesn’t go beyond the end of the window.

Now the content does go beyond the end of the the page so there is a vertical scrollbar. The flow of the text of the first paragraph is not the same as in the previous example because previously there wasn’t one and now there is.

The final example has "html { overflow-y: scroll; }" set so the vertical scrollbar is always present. You can see this in the screenshot below where there is a scrollbar present but it’s un-selectable.

Check Out These Related posts:

• Opening a new window with Javascript
• HTML/CSS background-position
• Using ellipsis with HTML and CSS
• Style HTML form elements optgroup and option with CSS in Opera