Make scrollbars always visible in Vivaldi browser using Stylus

Steps

Install Stylus Extension:
- Go to the Chrome Web Store and search for Stylus.
- Install the Stylus extension.

Create a New Style in Stylus:

Click on the Stylus icon in your browser toolbar.
Click on Manage > Write new style.

Add the following CSS code to make scrollbars always visible:

/* Always show vertical scrollbar */
html, body {
    overflow-y: scroll !important;
}

/* Always show horizontal scrollbar */
html, body {
    overflow-x: scroll !important;
}

/* Force scrollbar visibility for all elements */
*::-webkit-scrollbar {
    width: 16px;  /* Set the width for vertical scrollbars */
    height: 16px; /* Set the height for horizontal scrollbars */
    -webkit-appearance: none;
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5); /* Customize the color of the scrollbar thumb */
    border-radius: 8px; /* Customize the radius */
    border: 3px solid rgba(0, 0, 0, 0); /* Adjust border if needed */
}

*::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.1); /* Customize the background of the scrollbar track */
}

Save and Apply the Style:
- Give your style a name, for example, Always Show Scrollbars.
- Save and enable the style.

Why is Vivaldi browser a great companion?

While most browsers treat websites as simple tabs, Vivaldi wins by letting you turn any site—even those without official support—into a standalone Progressive Web App (PWA). This guide explores how a single right-click can transform utility sites like Google Translate or JSON tools into clean, independent windows that live on your dock or taskbar, helping you declutter your browser and turn the web into a personalized app library.

How to uninstall Progressive Web App installed with Vivaldi

Dev Notes

Other articles

Why is Vivaldi browser a great companion?

How to uninstall Progressive Web App installed with Vivaldi

Other articles

social