How to Show or Hide Scrollbars in Simulator Mode

Configure scrollbar behavior in Responsive Viewer to emulate native iOS/Android overlay scrollbars or desktop scrollbars.

Mobile operating systems (iOS and Android) typically hide scrollbars until the user actively scrolls. Responsive Viewer lets you choose between native thin scrollbars or permanent scrollbars.

Step-by-Step Instructions

Open Simulator Settings

While the simulator is active on any page, click the Settings (gear icon) in the simulator control panel.

Locate "Scrollbar Visibility"

Toggle between "Auto-hide Scrollbar" (mobile experience) and "Always Show Scrollbar".

CSS Custom Scrollbar Styling (Optional)

If you want custom scrollbars on your website, you can also use CSS `::-webkit-scrollbar` rules:

/* Custom sleek mobile scrollbar */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
}

Important Tips & Best Practices

On Mac, system scrollbars may also be influenced by macOS System Settings > Appearance > Show scroll bars.

Need the extension to get started?

Download Responsive Viewer free from Google Chrome Web Store.

Get Chrome Extension Report an Issue All Guides