View Issue Details

IDProjectCategoryView StatusLast Update
0020812MMW 5Skinning frameworkpublic2024-04-16 18:13
Reporterzvezdan Assigned To 
PrioritynoneSeverityminorReproducibilityN/A
Status resolvedResolutionwon't fix 
Summary0020812: Hovering scrollbar is not working as in Windows
DescriptionCurrently, Flat Monkey is the only skin that has the hovering effect on scrollbars, but I would like to have that properly implemented in my skin as well, since I want my skin to look as much as other Windows programs.

When you hover over a scrollbar in any standard Windows application (with Contrast themes set to None), the scroll thumb will change its width and scroll buttons will appear, even if you hover over the scrollbar track (between the thumb and buttons).

When you hover over the scrollbar track in Flat Monkey, nothing is happening. The thumb will change its width only if you hover directly over it.

I tried to get the same behavior in my skin as in Windows, but it seems that it is not possible using just CSS. I think something should be done in JS. Here is what I tried:
*::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb {
    border-width: @units0_4;
}

This doesn't work either:
*::-webkit-scrollbar:hover > ::-webkit-scrollbar-thumb

Nor this:
*::-webkit-scrollbar:hover + ::-webkit-scrollbar-thumb

Nor this:
*:has(::-webkit-scrollbar:hover)::-webkit-scrollbar-thumb
TagsNo tags attached.
Attached Files
Fixed in build

Activities

michal

2024-04-16 16:17

developer   ~0075138

It seems this is really not doable, as CSS does not allow to combine scrollbar pseudoelements, you cannot style one pseudelement (thumb) based on hover state of another pseudoelement (track/whole scrollbar). Closing as I do not see any way how to do it now.

zvezdan

2024-04-16 16:36

updater   ~0075139

I am thinking if you can add any event handler in JS that could detect if a mouse cursor is above a scrollbar, when it could set a new data attribute to its "parent" element. Lets call it e.g. data-horizontal-scrollbar-hover, and then a skin could have:

[data-horizontal-scrollbar-hover]::-webkit-scrollbar-thumb:horizontal {}

If it is too much work, or if it could slow down the program, then just forget it.

michal

2024-04-16 18:13

developer   ~0075142

Scrollbars do not have standard mouse events, like mouseOver. It would probably involve implementing completely own scrollbar control instead of the standard one, with own handling of everything. I do not think, it is worth the work.