View Issue Details
ID | Project | Category | View Status | Date Submitted | Last Update |
---|---|---|---|---|---|
0020812 | MMW 5 | Skinning framework | public | 2024-04-03 07:53 | 2024-04-16 18:13 |
Reporter | zvezdan | Assigned To | |||
Priority | none | Severity | minor | Reproducibility | N/A |
Status | resolved | Resolution | won't fix | ||
Summary | 0020812: Hovering scrollbar is not working as in Windows | ||||
Description | Currently, 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 | ||||
Tags | No tags attached. | ||||
Attached Files | |||||
Fixed in build | |||||
|
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. |
|
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. |
|
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. |