Unuseable Scroll-bar

[Darwin4Ever]

Hi,
I have (sometimes) a problem with the Vivaldi scroll-bar.

For certain sites (or webpages) the scroll-bar is so small that it's impossible to point to it for scrolling.

As an example , a screenshot of that page made from Firefox & Vivaldi. That example is accessed via the red button on this page , page without the problem.

As said, the same happens on other (complete) sites.

I use actually Vivaldi 4.1.2369.16 (Stable channel) (64-bit), but it happened with earlier versions too.

What might be going on ?

[Pathduck]

@darwin4ever said in Unuseable Scroll-bar:

What might be going on ?

Idiot web developers is what's going on:

::-webkit-scrollbar {
    width: 5px;
}

Not much to do about it, I don't think there's a setting or flag to turn off webkit-scrollbar but maybe there's an extension, try searching:
https://chrome.google.com/webstore/search/scrollbar?_category=extensions

It could probably be fixed in custom CSS too.
https://forum.vivaldi.net/topic/10549/modding-vivaldi

[Komposten]

This is a problem with the website, not with Vivaldi. The website developers have added some code that makes the scrollbar 5px wide instead of the default (see @Pathduck's post). This code only works in Chromium-based browsers which is why the scrollbar is thin in Vivaldi but normal normal in Firefox.

The second page you linked has a normal scrollbar because this code is not present there.

[Darwin4Ever]

@pathduck Hmmm..... but why isn't Firefox act equally ?
FYI : the same happens here , but on this site also in Firefox

[iAN CooG]

@darwin4ever said in Unuseable Scroll-bar:

@pathduck Hmmm..... but why isn't Firefox act equally ?

because

This code only works in Chromium-based browsers

[Catweazle]

@darwin4ever , this FOSS extension fix the problem, restore the default scrollbar in sites which change it.

Github https://github.com/ubershmekel/default-scrollbar

[Pathduck]

@darwin4ever Try this extension, it seems to work:
https://chrome.google.com/webstore/detail/default-scrollbar/nkjmoagfbmeafonfhbkeicjdhjlofplo/related

Seems to be the one posted by @Catweazle above but easier to install

Reason some sites have custom scrollbars in Firefox too:

* {
    scrollbar-width: thin;
}

[Catweazle]

@pathduck , the first link pointed to the Chrome Store to this extension, only added the github link as alternative.

[Darwin4Ever]

@ian-coog Yeah ... The reply of @Komposten came while I was typing mine, I hadn't seen it.

[Darwin4Ever]

Thank you very much folks !!!!
The extension solves the problem on both sites. Great !

[Catweazle]

@darwin4ever , however it is a very debatable insolence of the page to change the browser settings without authorization.

[JoelYoung]

Settings > Appearance
If 'Simple Scrollbars' is selected, unselect it.

Just a suggestion.

[Pathduck]

@joelyoung Nope, it only affects the Vivaldi UI, web page scrollbars are Chromium/Blink. And it actually makes scrollbars thinner

[Darwin4Ever]

Concerning the extension : When "All Sites" or "Specific Sites" are selected, the extension behaves as expected.

But how should I proceed when I select "On Click" ? Clicking the button gives some options, but none seem to change the scroll-bar for the current page.

[Pathduck]

@darwin4ever "On click" won't work in Vivaldi

[stardepp]

You can also create a new style with the Stylus extension:
https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
 ::-webkit-scrollbar-track {

  background: #2e5b02;
}
 
::-webkit-scrollbar-thumb {
  background: #628004;
}

With this style you can set the scrollbar width individually. Also the color of the scrollbar can be changed.

---

For internal Vivaldi settings pages there is a .css mod that allows you to customize the scrollbars size and color:

/* Whole scrollbar - made by gwen dragon  on the Vivaldi Forums */

::-webkit-scrollbar {
  width: 8px /*8*/ !important;
  height: 8px /*8*/ !important;
} /*
body::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
} 
*/
::-webkit-scrollbar-button {
  width: 0px !important;
  height: 0px !important;
}

/* Moving part */
::-webkit-scrollbar-thumb {
  background: #2e5b02 !important;
  /* background-color:#628004 !important; */
  border: 1px inset #2e5b02 !important;
  border-radius: 0px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: #2e5b02 !important;
}
::-webkit-scrollbar-thumb:active {
  background: #2e5b02 !important; /* On click */
}

/* Scrollbar background */
::-webkit-scrollbar-track {
  background: #628004 !important;
  border: 0px none #2e5b02 !important;
  border-radius: 0px;
}

body::-webkit-scrollbar-track {
  background: #2e5b02 !important;
  border: 0px none #2e5b02 !important;
  border-radius: 0px;
}

/*
::-webkit-scrollbar-track:hover {
  background: #2e5b02;
}

body::-webkit-scrollbar-track:hover {
  background: #2e5b02;
}

[Marko Indaco]

@darwin4ever hi, try this addon
Regards

[Darwin4Ever]

@marko-indaco For some reason, that addon only works for other sites, but not at all for the two examples I have problems with (contrary to the other extension)

[Darwin4Ever]

@stardepp This Stylus-solution (which I know as Firefox-addon) is much faster than the first extension. In the extension first the original scroll-bar is shown and then changed. Here it's instant.

Is this Vivaldi-update persistant ?

[stardepp]

@darwin4ever said in Unuseable Scroll-bar:

Ist dieses Vivaldi-Update persistent?

Yes, I can confirm that.