scrollbar safari

• 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)

A brief history of styling scrollbars:

• It used to be a thing only Internet Explorer could do (ancient versions) with stuff like -ms-scrollbar-base-color . These do not exist anymore.
• Then WebKit-based browser engines got on board with stuff like ::-webkit-scrollbar . That’s what this Alamanac entry mostly covers, as it works across the Safari/Chrome landscape today.
• Standards have finally gotten involved, and those styling options are covered by un-prefixed properties like scrollbar-color and scrollbar-width .

Styling scrollbars for the Safari/Chrome world is exposed behind the -webkit vendor prefix.

This almanac entry is an overview, for a more complete breakdown of working with custom scrollbars, please read this CSS-Tricks article .

The -webkit-scrollbar family of properties consists of seven different pseudo-elements that, together, comprise a full scrollbar UI element:

• ::-webkit-scrollbar addresses the background of the bar itself. It is usually covered by the other elements
• ::-webkit-scrollbar-button addresses the directional buttons on the scrollbar
• ::-webkit-scrollbar-track addresses the empty space “below” the progress bar
• ::-webkit-scrollbar-track-piece is the top-most layer of the the progress bar not covered by the draggable scrolling element (thumb)
• ::-webkit-scrollbar-thumb addresses the draggable scrolling element that resizes depending on the size of the scrollable element
• ::-webkit-scrollbar-corner addresses the (usually) bottom corner of the scrollable element, where two scrollbars might meet
• ::-webkit-resizer addresses the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements

In addition to these pseudo-elements, there are also eleven pseudo-selector classes that aren’t required but provide designers with the power to style various states and interactions of the scrollbar UI. A full breakdown of those pseudo-selectors, and a detailed example, can be found in this CSS-Tricks article .

Notes on usage

• If there is no qualifying selector preceding the various pseudo-elements, the styles will apply to any scrollbar that may appear on the page.
• Setting -webkit-scrollbar styles is a good way to force your webpage to show horizontal or vertical scrollbars on versions of Mac OS newer than Lion, on which scrollbars are usually hidden by default.
• Since this property is behind a -webkit vendor prefix, several jQuery plugins have been written to “polyfill” or extend this functionality to other browsers. One such plugin is jScrollPane .

Browser support

This browser support data is from Caniuse , which has more detail. A number indicates that browser supports the feature at that version and up.

Mobile / Tablet

Css tricks that use scrollbar, css scrollbar with progress meter.

Custom Scrollbars in WebKit

Hide Scrollbars During an Animation

Designing for “show scroll bars”, eliminate “jumps” in horizontal centering by forcing a scroll bar, how to create a horizontally scrolling site, more elegant fix for jumping scrollbar issue, indicating scroll position on a page with css.

Scrollbar Reflowing

Scrollbars on hover, position vertical scrollbars on opposite side with css, strut your stuff with a custom scrollbar.

Pure CSS Horizontal Scrolling

That’s Just How I Scroll

`matrix3d()` for a frame-perfect custom scrollbar, next steps with scrollbar.

• The Current State of Styling Scrollbars (CSS-Tricks)
• Custom Scrollbars in WebkKit (CSS-Tricks)
• How To Customize the Browser’s Scrollbar with CSS (DigitalOcean)
• Two Browsers Walked Into a Scrollbar (Zach Leatherman)
• Surfin’ Safari: Styling Scrollbars (WebKit Blog)

scrollbar-color

scrollbar-gutter

scrollbar-width

No more information on this and other properties? I mean you can provide some examples or illustration on these properties.

This property is rather antique. It used to work in IE 5.5

Way back in the day, you could customize scrollbars in IE (5.5) with non-standard CSS properties like scrollbar-base-color which you would use on the element that scrolls (like the ) and do totally rad things. IE dropped that.

it doesn’t works for mozilla firefox.

Nice example………. and this page has very very useful and wonderful features . especially this comment area is awesome!

your are awesome also.

No browser support for Firefox and is an open issue since 2001

how will i be able to customize the browser’s right scrollbar using css????

Hi Martin , Firstly , thanks a lot for sharing this about using scrollbar , I created a scroll bar for my text content in my html app , and now the scroll bar looks and works fine , but the guy at my office who reviewed my UI said that the when the text content is scrolled , it appears as if the text is getting cut and displayed at the top or at the bottom . I actually tried to scroll the text in your example and feel the same .

DO you have any suggestion on how i can get rid of the text being shown as half cut when i scroll ??

thanks Sabir

It is happening because the height of the body is set to 100%. try changing the height.

Let me know if I am getting your point here.

This websiteos is asomitos

Thank you you so much its very helpful to me :)

thank you nice information for front end developers

ThanQ boss, this example helped me in designing my website.

It’s nice. Better if run the firefox and IE.

Not working in Firefox & IE

How can I apply original style to ::-webkit-scrollbar-button? Do I have to specify background image for it?

is there any way to increase the scroll bar width in IE 11?

nice helpfull

why can’t use :hover style for it? the facebook create hover style by using script…

Enjoyed reading this and tried it myself but the custom scrollbar did not render in Firefox, looks great in other browsers, any ideas?

Good example. approximately also implemented here on the website.

Not working in mozilla firefox

-moz- instead of webkit

not working on firebox browser……………

Android Chrome browser removed support since last December 2016. Doesn’t work now on android chrome but works on desktop chrome.

hello m not able to change the height of scroll bar thumb .how can I change it???

You can not change height of scroll thumb. It depends on height of body

I want to show the scrollbar in the middle of the screen, 80% of the height. Is there any possibility?

How can a change the color of ::-webkit-scrollbar ?

When I toggle between Overflow: hidden and scroll, my page layout shifts. Do you know a way to make this toggle of on and off not affect my containers width/layout? Thanks! Awesome site I use it all the time.

Thank you! All works as should be https://clip2net.com/s/3RHC84j

Here is the plugin that you can use.

http://grsmto.github.io/simplebar/

Antonio J Figueroa – you can use CSS body{overflow-y:overlay;} , but be aware that overlay is non-standard property and only Chrome supports that.

what are the chances there is something similar that will work on drop-down as well …

This article should be updated to include the styling options for firefox: Styling scrollbars in Firefox is also possible (since v64) with scrollbar-color and scrollbar-width .

Examples are available at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

I’ve created this tiny script for easy scrollbar customization.

https://github.com/yairEO/fakescroll

Thanks! Very useful info, as always on css-tricks!

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.

Copy and paste this code: micuno *

Leave this field empty

How TO - Custom Scrollbar

Learn how to create a custom scrollbar with CSS.

Custom Scrollbars

Note: Custom scrollbars are not supported in Firefox or in Edge, prior version 79.

How To Create Custom Scrollbars

Chrome, Edge, Safari and Opera support the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser's scrollbar.

The following example creates a thin (10px wide) scrollbar, which has a grey track/bar color and a dark-grey (#888) handle:

This example creates a scrollbar with box shadow:

Scrollbar Selectors

For webkit browsers, you can use the following pseudo elements to customize the browser's scrollbar:

• ::-webkit-scrollbar the scrollbar.
• ::-webkit-scrollbar-button the buttons on the scrollbar (arrows pointing upwards and downwards).
• ::-webkit-scrollbar-thumb the draggable scrolling handle.
• ::-webkit-scrollbar-track the track (progress bar) of the scrollbar.
• ::-webkit-scrollbar-track-piece the track (progress bar) NOT covered by the handle.
• ::-webkit-scrollbar-corner the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
• ::-webkit-resizer the draggable resizing handle that appears at the bottom corner of some elements.

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.

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

Guide to styling CSS scrollbars

The default browser scrollbar works fine in most cases. However, leaving it as is can make even the most beautiful websites look incomplete and unpolished. By styling the scrollbar, you can create a more visually appealing site that better aligns with your brand or design. In this tutorial, we’ll explore a few different ways to style CSS scrollbars.

Jump ahead:

Introduction to scrollbars

Styling scrollbars in chrome, edge, and safari, scrollbar pseudo-class selectors, styling scrollbars in firefox, styling scrollbars for more cross-browser support.

The scrollbar is a frequently overlooked element in web design. While it may seem like a small detail, it plays an essential role in website navigation. The default scrollbar is often dull and might look out of place, detracting from the overall aesthetics. Fortunately, you can easily customize the scrollbar using CSS. To do so, you’ll need to write two sets of CSS rules to cover Webkit browsers, like Chrome, Edge, Safari, and Firefox .

Before diving into the code, let’s make sure we understand the structure of a scrollbar. Knowing this is helpful when styling it with CSS because you can use different properties to target specific parts of the scrollbar. Below are the elements that make up a scrollbar:

• Thumb: The movable part of the scrollbar that represents the current position of the content. It can be clicked and dragged to scroll the content up or down
• Track: The area of the scrollbar that the thumb moves along. It represents the entire length of the content
• Arrow buttons: Located at the top and bottom of the scrollbar track, the arrow buttons can be clicked to scroll the content
• Scrollbar borders: The lines that surround the scrollbar element
• Scrollbar corner: The intersection between the vertical and horizontal scrollbars when both are present

Webkit browsers allow scrollbar styling using pseudo-elements like :: -webkit-scrollbar , ::-webkit-scrollbar-button , ::-webkit-scrollbar-thumb , ::-webkit-scrollbar-track , and more. Each of these targets different parts of the scrollbar, as listed above. The CodePen below shows an example of a styled scrollbar using the pseudo-elements above:

See the Pen webkit scrollbar style by Taminoturoko Briggs ( @tammibriggs ) on CodePen .

In the code above, we’ve displayed both the vertical and horizontal scrollbars, but in most cases, we’d only display one. To do so, we can modify the overflow property, which is responsible for the visibility of the scrollbar, to either overflow-x or overflow-y , depending on which axis we will display the scrollbar. However, for the example above, this wouldn’t be enough unless we make the image responsive by setting its width and height to 100% .

To create a more customized design, you can target specific elements of a scrollbar and apply styles to them by adding a pseudo-class to each pseudo-element . Below are some of the most common pseudo-classes:

• :horizontal : Used to style the horizontal scrollbar differently from the vertical scrollbar. For example, you can set a different width or color for the horizontal scrollbar
• :vertical : Used to style the vertical scrollbar differently from the horizontal scrollbar
• :decrement : Applies to the arrow buttons at the beginning of the scrollbar. It is used to style the decrement button or the up arrow for a vertical scrollbar and the left arrow for a horizontal scrollbar
• :increment : Applies to the arrow button at the end of the scrollbar. It is used to style the increment button or the down arrow for a vertical scrollbar and the right arrow for a horizontal scrollbar
• :start : Applies to the first buttons and first track piece of the scrollbar, which are at the top or left side of a vertical or horizontal scrollbar, respectively
• :end : Applies to the last track piece of the scrollbar, which are at the bottom or right side of a vertical or horizontal scrollbar, respectively

Below is an example that uses all the pseudo-classes above except :horizontal to give the vertical scrollbar a different look:

See the Pen webkit scrollbar vertical pseudo-class by Taminoturoko Briggs ( @tammibriggs ) on CodePen .

The example below uses the :horizontal pseudo-class to insert a shadow onto the horizontal scrollbar’s track:

See the Pen webkit scrollbar horizontal pseudo-class by Taminoturoko Briggs ( @tammibriggs ) on CodePen .

While the Webkit specifications for styling a scrollbar work fine at the time of writing, W3C has officially abandoned this specification and it is expected to be phased out gradually.

Firefox doesn’t offer any advanced styling methods like the Webkit browsers. At the time of writing, only scrollbar-width and scrollbar-color are available, which is the standard as specified by W3C CSS Scrollbars . These properties can be used to style a scrollbar’s width, thumb, and track color:

When styling a scrollbar, combining the Webkit and W3C CSS Scrollbars specifications is recommended to cover more browsers:

In WebKit browsers, rules that aren’t recognized will be ignored, and the browsers will apply the -webkit-scrollbar rules. On the other hand, in Firefox browsers, rules that aren’t recognized will be ignored as well, and the browsers will apply the CSS scrollbars rules. Therefore, the scrollbar will retain its styling in more browsers. Although the downside is that there are no advanced styling methods in Firebox like in Webkit, you might be able to style the scrollbars to look exactly the same.

Styling a scrollbar makes a site look more polished. It can also help differentiate a brand or product by incorporating its color scheme or logo into the scrollbar design. However, it is recommended not to style your scrollbar too far from its original look and feel so as not to make it unfamiliar to users and reduce the user experience. I hope you enjoyed this article, and be sure to leave a comment if you have any questions. Happy coding!

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket .

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — start monitoring for free .

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)

Stop guessing about your digital experience with LogRocket

Recent posts:.

Implementing infinite scroll in Next.js with Server Actions

Infinite scrolling in Next.js no longer requires external libraries — Server Actions let us fetch initial data directly on the server.

Integrating Django templates with React for dynamic webpages

Create a dynamic demo blog site using Django and React to demonstrate Django’s server-side functionalities and React’s interactive UI.

Using aoi.js to build a bot on Discord

Explore how the aoi.js library makes it easy to create Discord bots with useful functionalities for frontend applications.

Web Components adoption guide: Overview, examples, and alternatives

Evaluate Web Components, a set of standards that allow you to create custom HTML tags for more reusable, manageable code.

Leave a Reply Cancel reply

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.

CSS Scrollbar Styling Tutorial – How to Make a Custom Scrollbar

Have you ever visited a website with a custom scrollbar and wondered how they did it? After reading this article you will understand just about everything there is to know about customizing and styling scrollbars using CSS.

In this tutorial you will:

• Learn the native CSS properties available for styling a scrollbar in the browser
• Create four unique scrollbars using CSS
• Learn about some external libraries that give cross-browser support for custom scrollbars

Video Tutorial

If you prefer video tutorials to reading, you can watch instead. You can also use the video to leave comments/questions and post links to your own custom scrollbars using something like CodePen so others can see your work.

Pros and Cons of a Custom Scrollbar

Before jumping into the code, I think it's worth looking at some potential tradeoffs that come with creating a custom scrollbar for your website or app.

The upside is that it can give your website a chance to standout compared to the millions of websites using the browser default scrollbar. Anything that can make your website even a little bit more memorable to visitors will benefit you long term.

On the other hand, many UI designers believe that you should never interfere with "standardized" UI components like the scrollbar. If you modify your scrollbar too much, it may confuse people using your website or app.

If you are doing this for your own personal website you probably don't need to worry about it as long as you like how it looks.

On the other hand if you are thinking about implementing a custom scrollbar at work or some project where you want to make money, you should try A/B testing and make a data driven decision based on the results.

At the end of the day most of us are writing code to drive revenue for a business, so you always need to keep that in mind.

Getting Started

The first thing you need to do is create a basic layout so the page is large enough to actually show a scrollbar in your web browser:

Nothing fancy here, just a basic div container with the class name container for our layout, a header for a title, and a bunch of paragraphs with the class name para to fill out our page.

Here's the CSS to make things look a little fancier:

Your page should look something like this:

How to Create Custom Scrollbars with CSS

With our setup out of the way, we can jump into the fun part of the tutorial. The first part of this section will be learning the various CSS properties available to use for styling.

In the second part we'll implement four different types of scrollbars to give you some ideas for making your own scrollbars.

CSS properties available for styling scrollbars

Unfortunately we still don't have any standardized cross-browser support for styling scrollbars with CSS. Firefox and Webkit-based browsers like Chrome, Edge, and Safari have different properties for styling.

This tutorial will mainly focus on Webkit browsers, because they offer more options for styling, but we will briefly cover Firefox as well.

Webkit CSS styling properties for scrollbars

• ::-webkit-scrollbar – the entire scrollbar
• ::-webkit-scrollbar-track – the entire progress bar area of the scrollbar
• ::-webkit-scrollbar-thumb – the draggable section of the scrollbar

The below properties are available but are less commonly used:

• ::-webkit-scrollbar-button – the up/down buttons at each end of the scrollbar
• ::-webkit-scrollbar-track-piece – part of scrollbar not covered by the thumb
• ::-webkit-scrollbar-corner – bottom corner where horizontal and vertical scrollbars meet

Firefox CSS styling properties for scrollbars

There are currently two available CSS properties for styling scrollbars in Firefox

• scrollbar-width – controls width of scrollbar, with only two options available being auto or thin
• scrollbar-color – takes two colors which are used for the coloring of the thumb and track of the scrollbar in that order

Now that you know your options for customizing scrollbars, let's put it into practice with some examples.

Dark Theme Scrollbar

Dark theme websites are all the rage right now. Sticking with the default browser scrollbar could come off as jarring to users because it doesn't fit all that well with a dark themed website.

Let's use our newfound knowledge of CSS to create a dark theme scrollbar with a rounded border inspired by CSS Tricks' website:

The result is a little hard to see in the screenshot, but the track is black and the thumb is a darkish gray color.

Minimalist Scrollbar

For this example you'll be making a minimalist scrollbar. This type of scrollbar would work well if you are going for a simple, elegant style for your website.

The most important thing to note is that you have the ability to use hover and active pseudo-elements from CSS to further style your scrollbar. In this case the scrollbar will turn a darker gray when you hover and drag on the thumb.

The result:

Patterned Scrollbar

In this section, the focus is on using a repeating linear gradient to create a pattern effect on our scrollbar track. The same could be done for the scrollbar thumb as well.

Another thing to notice is that you can style the scrollbar thumb with a border, which you can use to create a number of cool effects. In this case I made the background color of the thumb transparent so that you can see the scrollbar track pattern as we scroll.

"Animated" Gradient Scrollbar

This example uses a linear gradient and a trick with box shadow to make it look like the scrollbar is changing color as you move up and down the page. What's really happening is that the background of the scrollbar track is being revealed beneath the thumb.

It works because the box-shadow takes up all the space of the scrollbar except for where the thumb is. Because the thumb is transparent the gradient color of the background shows through.

Custom Scrollbar Limitations and Alternatives

There are clearly some problems with creating custom scrollbars. The first would be the lack of cross-browser support. Other issues would be the lack of ability to add transitions or animations to the scrollbar and the fact your custom scrollbar won't appear on mobile devices.

An alternative is hiding the default scrollbar and using a library, but this may effect performance when used as main scrollbar for your page. And there are other potential usability issues because these libraries rely on JavaScript to imitate the native scrollbar behavior.

Below I'll go over two popular open-source libraries for making scrollbars.

SimpleBar Library

As the name tells you, SimpleBar is all about making it easy to create custom scrollbars. The only real downside here is that it doesn't support usage as the main scrollbar for your website or for table, text area, or select HTML elements.

The main purpose of SimpleBar would be for creating custom scrollbars for things like dynamic chat applications or any other type of internal page element where you want scrolling.

Overlay Scrollbars Library

Overlay Scrollbars is very similar to SimpleBar but has the added benefit of supporting the HTML body element. This means that you can use it for the main scrollbar of your website in addition to all the other features you would expect like cross-browser and mobile support.

Hopefully this article gave you a solid understanding of how styling CSS scrollbars works.

If you have any questions you can leave a comment on the YouTube video and I'll try to help you out. Also feel free to leave links to your own designs so other people can check them out.

Link to GitHub repo: https://github.com/renaissanceengineer/css-scrollbar-tutorial

Read more posts .

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

• Español – América Latina
• Português – Brasil
• Tiếng Việt

Scrollbar styling

Use the scrollbar-width and scrollbar-color properties to style scrollbars.

Introduction

From Chrome version 2 it's been possible to style scrollbars with the ::-webkit-scrollbar-* pseudo-elements . This approach works fine in Chrome and Safari, but was never standardized by the CSS Working Group.

What did get standardized are the scrollbar-width and scrollbar-color properties, part of the CSS Scrollbars Styling Module Level 1 Specification . These properties are supported as of Chrome 121.

Browser Support

Scrollbars 101

Anatomy of a scrollbar.

At the minimum a scrollbar consists of a track and a thumb. The track is the area in which the thumb can move. The track represents the entire scroll distance. The thumb represents the current position within the scrollable region. As you scroll, it moves within the track. The thumb is often also draggable.

Scrollbars can have more parts than just the thumb and track, though. For example, a scrollbar could have one or more buttons to increment or decrement the scroll offset. The parts that make up a scrollbar are determined by the underlying operating system.

Classic and overlay scrollbars

Before looking at how to style scrollbars, it’s important to understand the distinction between two types of scrollbar.

Overlay scrollbars

Overlay scrollbars are floating scrollbars rendered on top of content underneath. They are not shown by default but only while you are actively scrolling. To keep the content underneath visible they are often semi-transparent, but that’s up to the operating system to decide. While interacting with them, their size may also vary.

Classic scrollbars

Classic scrollbars are scrollbars that are placed in a dedicated scrollbar gutter . The scrollbar gutter is the space between the inner border edge and the outer padding edge. These scrollbars are usually opaque (not transparent) and take away some space from the adjacent content.

The scrollbar-color and scrollbar-width properties

Giving scrollbars color with scrollbar-color.

The scrollbar-color property lets you change the color scheme of scrollbars. The property accepts two <color> values. The first <color> value determines the color of the thumb, and the second one the color to use for the track.

When using an overlay scrollbar, the color of the track has no effect by default. However, upon hovering the scrollbar, the track will show.

To use the default rendering provided by the operating system, use auto as its value.

Changing the size of the scrollbar with scrollbar-width

The scrollbar-width property lets you choose a narrower scrollbar, or even to hide the scrollbar completely without affecting scrollability.

Accepted values are auto , thin , and none .

• auto : The default scrollbar width as provided by the platform.
• thin : A thin variant of scrollbar provided by the platform, or a custom scrollbar thinner than the default platform scrollbar.
• none : Effectively hides the scrollbar. The element is still scrollable though.

It is not possible to use a <length> such as 16px as the value for scrollbar-width .

When using an overlay scrollbar, the thumb only gets drawn while you are actively scrolling the scrollable area.

Supporting older browser versions

To cater for browser versions that don’t support scrollbar-color and scrollbar-width , it’s possible to use both the new scrollbar-* and ::-webkit-scrollbar-* properties.

Note that when you set the width or height of ::-webkit-scrollbar , an overlay scrollbar is always displayed, effectively turning it into a classic scrollbar.

To keep the illusion, you can choose to only change the colors when hovering the scroller.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2024-01-17 UTC.

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

How can I get my scrollbar back in Safari?

My scroll bars keep on disappearing in Safari browser windows and I always have to hit the down key instead of using my Wacom pen or Apple bluetooth mouse to scroll down. When I point my mouse or pen towards the righthand end of the screen the scrollbar never reappears. Is there a way of getting scrollbars to stay up all the time? Its kind of annoying.

Time Capsule-OTHER, OS X Mountain Lion (10.8.2)

Posted on Sep 21, 2012 2:02 AM

Posted on Sep 21, 2012 2:10 AM

Have you visited System Preferences > General > Show Scroll Bars: Set this to "Always".

Loading page content

Page content loaded

Sep 21, 2012 2:10 AM in response to timbloke

Nov 17, 2017 12:35 PM in response to timbloke

I have the System Preference set to Always Show, and Safari still (November 2017) arbitrarily hides the vertical scrollbar. Sometimes multiple command-minus (till text is too small to see) brings it back, and it stays when I restore the font size to something readable. Other times it's a matter of resizing the browser window. This is incredibly annoying.

Feb 25, 2013 5:39 PM in response to SteveKir

Mar 30, 2013 6:07 PM in response to SteveKir

SteveKir wrote: Have you visited System Preferences > General > Show Scroll Bars: Set this to "Always".

Thanks Steve.

Just started working with OS X 10.8 aka Mountain Lion after upgrading from 10.6 (whatever its name was) and have spent most of the time working out how to turn off various animations and auto–corrections and get back scroll bars.

Apr 8, 2013 3:23 PM in response to SteveKir

Hi Steve, I have 10.8 and my scroll bar is missing but I do not have the option in my safari prefrences to add a scroll bar. Is there a way to get it back?

Apr 8, 2013 3:27 PM in response to kimdev

kimdev wrote: Hi Steve, I have 10.8 and my scroll bar is missing but I do not have the option in my safari prefrences to add a scroll bar. Is there a way to get it back? Thanks Kim

It's exactly where Steve said it is in System Preferences, not Safari Preferences.

Apr 9, 2013 3:16 PM in response to SteveKir

I am on Mac OS X and also in Safari browser windows the scroll bar sometimes isn't there, however in System Preferences there isn't a General option, and when I went on Appearance which seems is where the options of scroll bar behaviour are, there were no three options that I could choose Always from. Also when there is no scroll bar in the Safari window nothing happens when I press the arrow keys or space bar so I'm stuck being able to view only the top of the page. Do you know if there is a way around this please?

Apr 9, 2013 3:54 PM in response to anapourva

The very first I on in System Preferences should be General.

Apr 9, 2013 4:29 PM in response to anapourva

anapourva wrote: ... however in System Preferences there isn't a General option, and when I went on Appearance which seems is where the options of scroll bar behaviour are, there were no three options that I could choose Always from.

If You can't find it, click "Show All" in System preferences. It should be the very first item if you have System Preferences "View" option set to "Organize by categories."

If you are stoll having problems finding it, type "scroll" in the search box at the top right of the window, which should highlight every preference pane that involves scrolling, including "Gneral."

If you still can't find it, in the popup list under the search box, choose "Scroll Bar Behavior."

Apr 9, 2013 4:37 PM in response to R C-R

thank you for what you've said i've followed it all yet no success, maybe its just how it is set and I can't get that "always" option

Apr 9, 2013 4:40 PM in response to anapourva

What version of Mac OS are you running?

This is the General tab in System Preferences (not Safari) running 10.8.3:

You can see that I have "show scrollbars always" checked.

Apr 9, 2013 4:48 PM in response to petermac87

the 1st in my system preferences is Appearance under Personal, and it is Organised by Categories under View, as R C - R said hmm

Apr 9, 2013 4:52 PM in response to anapourva

anapourva wrote: the 1st in my system preferences is Appearance under Personal, and it is Organised by Categories under View, as R C - R said hmm

What version of OSX are you running?

Apr 9, 2013 4:57 PM in response to babowa

I'm on 10.6.4, thats probably why? ye I don't have that option of Show scroll bars so I can't choose Always. how do you take a capture of it so I can show?

Apr 9, 2013 5:03 PM in response to petermac87

version 10.6.4

How to Hide Scrollbars in Safari: A Guide for Software Developers

Abstract: Learn how to hide scrollbars in Safari using CSS. This guide is perfect for software developers who want to improve the user experience of their websites and web applications.

Hide Scrollbars in Safari: A Guide for Software Developers

As a software developer, you may encounter situations where you want to hide the scrollbars in the Safari browser while keeping the scrolling functionality intact. This article will provide you with a detailed guide on how to achieve this using CSS and JavaScript.

Why Hide Scrollbars?

There are several reasons why you might want to hide scrollbars:

• To create a cleaner and more minimalist design.
• To provide more space for content, especially on small screens.
• To match the design of other platforms or applications.

CSS Solution

The simplest way to hide scrollbars in Safari is by using CSS. The following code snippet demonstrates how to do this:

The -webkit-overflow-scrolling property enables smooth scrolling in Safari, while the overflow-y property sets the vertical scrollbar to be always visible. The -ms-overflow-style property hides the scrollbar in Internet Explorer, and the scrollbar-width property hides the scrollbar in Firefox. Finally, the ::-webkit-scrollbar pseudo-element hides the scrollbar in Safari.

JavaScript Solution

If you need more control over the scrolling behavior, you can use JavaScript to hide the scrollbars. The following code snippet demonstrates how to do this:

This code calculates the width of the scrollbar and sets the overflow-y property to scroll if the scrollbar is necessary. It also sets the width of the body to match the client width, effectively hiding the scrollbar.

Applications

Hiding scrollbars can be useful in a variety of applications, such as:

• Creating a custom scrollbar that matches the design of your website or application.
• Implementing a scrolling behavior that is different from the default behavior, such as scrolling by dragging the content itself.
• Creating a responsive design that adapts to different screen sizes and orientations.

Significance

Hiding scrollbars is an important technique for software developers who want to create a clean and minimalist design that provides more space for content. It also allows for more control over the scrolling behavior, enabling the creation of custom scrolling experiences that match the design of your website or application.

In this article, we have covered the key concepts, applications, and significance of hiding scrollbars in Safari. By using CSS and JavaScript, you can hide the scrollbars while keeping the scrolling functionality intact, providing a cleaner and more minimalist design that matches the design of your website or application.

• MDN Web Docs: overflow-y
• MDN Web Docs: scrollbar-width
• MDN Web Docs: ::-webkit-scrollbar
• MDN Web Docs: Element.clientWidth
• MDN Web Docs: Element.scrollWidth

Tags: :  software development web development Safari scrollbars

Latest news

• Conditional Rendering Routes in SolidJS with @solidjs.router
• Optimizing Excel: A Newbie's Quest for Efficiency
• Retrieving Candidate Data with Django: A Look at get() in Views.py
• Checking Equality of Two Python Click Applications: Comparing Parameters and Command Group Options
• Implementing Passkey in AuthCompanion2: An Overview of the loginOptionsHandler Code
• Developing a Terminal-based 2D Graphic Library: Controlling Number of Rows and Columns
• CKEditor5 Mention Plugin Not Displaying in React
• Troubleshooting Lightbox Display Issues in Frontend Development
• Automatic Refresh Issue: Real-Time Dashboard in Power BI
• Sequelize Supports MySQL Schemas: A Clarification
• Securing Your Software Development Site: X-Content-Type-Options and X-Frame-Options
• Retrieving Image URLs Array Field from Subcollection in Flutterfirestore
• Managing Multiple Paths in Start-Processes with Variables
• Excluding Ansible Role without Task Printed: A Simple Playbook Approach
• Error Adding MongoDB Collection: JsonParameterDisallowedCreateMode
• Resolving Error: Unable to Create Bean 'processEngineConfiguration' in Activiti Local Environment
• Implementing Endless Scrolling with Redux Toolkit and RTK Query
• Removing Nomachine from Ubuntu: A Guide for Better Connectivity
• Using Supabase Realtime Database with RLS Custom JWT: A Solution
• Godot 4.2.2: Area3D - Cant Collide: CSG Boxes with Static Bodies
• Problem with Printing Receipts using React Thermal Printer in Restaurant Project
• Django's `qs.evaluate()` Queryset Causes N+1 Problem
• Regular Expression: Selecting Text Two Character Patterns
• Trying to Write a Small Game using ADA on OS X with Sonoma 14.4.1: Ada using Alirenat's nativetoolchain
• Maintaining Original Image Dimensions When Saving with Matplotlib
• Troubleshooting Connection Issues between Vercel Node.js Server and MongoDB
• LazyList State in Composable Functions: Sporadic Recompositions
• Endless Refreshing of Login Page in Blazor Application during Identity Upgrade
• Reinterpreting Casts: A Potential Legal Issue with Freelist Allocators
• Unpredictable Random Number Generation: Beyond Guided Ways
• Conditional Grouping: df Three Columns Pairs
• One-Finger Panning and Zooming with Two Fingers in Leaflet
• Creating a Ball Collision Simulation in C++ with a Visualization Library
• C++ SteamworksAPI and Unreal Engine 5.2: Unreceived Messages between ChunkServer and ChunkLoader
• Windows 10: Unable to Disable Virtualization-Based Security (VBS) on AMD Ryzen 5000 in a Joined Domain

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

Moscow Tours & Travel Packages 2024/2025

Our 60 most popular moscow trips. compare tour itineraries from 45 tour companies. 308 reviews. 4.7/5 avg rating., popular moscow tours.

St Petersburg & Moscow in Style - Winter

• Explore the majestic St Petersburg & Moscow on private city tours
• Admire the rich Russian history, art and architecture
• Travel to Moscow on a highspeed train
• Enjoy the local cuisine in stylish restaurants

Lower Volga Voyage

• Visit magnificent Red Square and Kremlin and examine the collection at theKremlin’s State Armory.
• Experience Russia’s diverse musical traditions at lively folk music performances
• Explore Volgograd, the site of the decisive battle of World War II’s eastern front

Volga Dream Russian River Cruise

St Petersburg & Moscow in Style - Summer

White Russian - 7 days

• Discover Moscow's UNESCO-listed Red Square, home to spectacular St Basil’s Cathedral, Lenin's Mausoleum and the historic GUM Department store
• Explore the grounds of Moscow's mighty Kremlin, with its numerous governmentbuildings, gold-domed cathedrals and the giant tsar bell
• Celebrate New Year's Eve in Moscow!
• Take in the highlights of St Petersburg including a guided tour of the exquisite Church on Spilled Blood, Peter & Paul Fortress and Cathedral
• Take a guided tour of the remarkable Hermitage Museum at the Winter Palace

Vodka Shot - 6 days

• Explore the beautiful city of St Petersburg, including the exquisite Church on Spilled Blood, Peter & Paul Fortress and Nevsky Prospekt
• Marvel at the dazzling array of art and exhibits in the world-famous Hermitage Museum, at the Winter Palace in St Petersburg
• Discover a lavish residence of the tsars on a day trip to Catherine Palace at Tsarkoe Selo (winter: mid-October to April) or Peterhof Palace and gardens (summer: May to mid-October)
• Take in the highlights of the capital on a walking tour, visiting Moscow's famous Red Square, home to the historic GUM Department Store, Lenin’s Mausoleum and spectacular St Basil’s Cathedral
• Take a guided tour of the Moscow Kremlin, Russia’s political power house. Stroll around the grounds of this fortified complex, visit the Kremlin's cathedrals and see the mighty Tsar Bell

Route of the Romanovs - 10 days

• Learn about the last days of the Romanovs in Yekaterinburg, visiting the sites where Tsar Nicolas II and his family were assassinated and buried
• Straddle two continents at the famous obelisk Europe/Asia border marker in Yekaterinburg
• Experience the Trans-Siberian railway on an overnight train journey from Moscow to Yekaterinburg

New Year's in Moscow - 9 days

• Visit Catherine Palace at Tsarkoe Selo on Christmas Day and marvel at the incredible Amber Room
• Spend a night in Novgorod, an ancient city by the Volkhov River - explore the kremlin, cathedral and other sights and enjoy a traditional Russian banya (sauna)

All Moscow , expedition cruises, self guided adventures and vacation packages. Find the best guided and expert planned vacation and holiday packages. Read more about Moscow

Small Group Moscow Tours

Back in the USSR - 7 days

Russian Revolution - 9 days

• Visit historic Novgorod, an ancient city which straddles the Volkhov River. Explore the attractive riverside kremlin and experience a traditional Russian banya (sauna)

The Snowball - 6 days

• Visit Catherine Palace at Tsarkoe Selo and marvel at the incredible Amber Room

Mood for Moscow - 4 days

• Head underground to visit a Stalinist-era Soviet Bunker on an optional excursion
• Stroll to the vibrant Izmailovo Market, which lies behind the walls of an ancient Kremlin, and shop for an array of souvenirs

Best Moscow Tours by Duration

Tours, Cruises & Private Trips

Best Moscow Tours by Price

Top Moscow Attractions & Experiences

Moscow Tours & Travel Guide

Moscow Attractions & Landmarks Guide

Moscow reviews & ratings, capitals of the north.

some hotels could have been better

It was jam packed with every place I wanted to go and see. I especially love my photo of us setting out on the night time river cruise in St Petersburg and the Peter...

I really did not buy much and what I did buy was small gifts for others .

Johanna-Marie

Good hotels, some better than others. Interesting itinerary

Too rushed. Optional tour rather too short

See all Moscow reviews

Moscow Tours FAQ

1. Does Travelstride have all the tour operators?

2. How does the Member Savings program save me money?

3. Can I trust the tour operator and trip reviews on Travelstride?

4. What does ‘Stride Preferred’ mean?