unhide scrollbar

Treap

Hello,
Is there a way to permanently block pages from hiding scrollbars or making them always show it? It's mainly about the vertical one. More sites are making them hide, usually the one that need much of scrolling and it's highly annoying. In Vivaldi it makes scrollbar very thin and unusable. Here are two examples of sites that do it: https://www.gearbest.com ; https://kwejk.pl

luetage

The scrollbars are being changed with css by the site itself. There is no way for Vivaldi to undo this as far as I know. If you want to change them, you have to write custom css for each site yourself. You can implement it with a userscript (these run native on Vivaldi), or with the help of an extension like Stylus.

Treap

I rather thought of some extension for that and Stylus might be some bypass for this. I hope this will become annoying for many people soon and some extension aimed specially for this will be made.
Thanks helpful reply.

Treap

@luetage well, stylus didn't help ;F one extension worked but it disabled all the css but whole site is based on css so it wasn't really helpful :v

luetage

@treap A custom css can't disable whole style sheets on the target site. You took a wrong turn somewhere.

greenenemy

I don't know how to force default scrollbar but if you want it to be just wider then this user script should work on most websites.

// ==UserScript==
// @name         webkitScrollBarWidth
// @namespace    http://webkitscrollwidthblabla.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include http://*.* 
// @include https://*.* 
// @grant        none
// ==/UserScript==

(function() {
    'use strict';


var webkitScrollWidth = window.getComputedStyle(
    document.querySelector('body'), '::-webkit-scrollbar'
).getPropertyValue('width');

if (webkitScrollWidth != 'auto') {

    var addRule = (function (style) {
        var sheet = document.head.appendChild(style).sheet;
        return function (selector, css) {
            var propText = typeof css === "string" ? css : Object.keys(css).map(function (p) {
                return p + ":" + (p === "content" ? "'" + css[p] + "'" : css[p]);
            }).join(";");
            sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length);
        };
    })(document.createElement("style"));

    addRule("::-webkit-scrollbar", {
        width: "16px !important",
    });
}


})();

save it as something.user.js drag and drop on extensions page

Treap

oh god yes! this is it!