Scrollbar in css

we can add scrollbar css div::scrollbarX{ css like a another node

} div::scrollbarY{ css like a another node

}

This already exists. Please search before posting.

No it doesn’t already exist, what you posted is applicable to webkit and blink only. It is not in any way standardised.

We had a discussion about this previously actually.

standarized? it is a new feature how can it be standard ?

I was responding to @jhpratt who said it exists, I was saying that the example he gave wasn’t standard which is why this is a conversation worth having.

I developped a javascript scrollbar plugin and i saw it is not possible to solve all the possibility offered by a custom div using a a simplified set of properties as now is. For realizing a scrollbar all javascript plugins use a div in absolute position. In this div i can design what i want also a teddy bear as pointer So considering x,y scrollbar and new css feature using ::before ::after using a similar thing ::scrollbarX,::scrollbarY browser make a similar thing but with the feature to move the position automatically without to use javascript. Simple, powerfull and it permits any scrollbar graphical design

I do not understand - what does ::scrollbarX do? What element (or pseudo element, or graphical) exactly does it style? The thumb? The entire scroll bar? A scroll bar has many, many parts (see the various -webkit properties). Having a single pseudo element (::scrollbarX) makes it really unclear what exactly you are styling (and I still do not get it).

Also, currently, you cannot add pseudo element to pseudo elements (so ::scrollbarX::before will not work), if I remember correctly.

Please, elaborate.

You are right . it is a missing part in the description because i wished point out the moving part in the scrollbar (thumb bar) because it is a real part having particular feature (not only css /graphical)

thumb is no more a predefined rectangule but a moving special div in which i can define internaly what i want. I can put a image for example. It is pratically a special div moving automatically by mouse command but what is inside is decided by web developer. I can hide it when i want as a normal div. I can design inside as a normal div. In this way have a high flexibility removing all the javascript part present in custom scrollbar plugins. Essentially what distinguish a scrollbar feature is the moving feature and not css. It is this part must be handled nativelly by browser.

anyway for answering about more details about all

it might be: ::scrollBarX ::scrollbarY

the div for the scrollbar area and
::scrollBarX::thumb for the div moving described above

What about the arrows of the scroll bars?

Are you familiar with the -webkit CSS properties for styling a scroll bar? They offer a pretty complete solution. Standardizing on that (minus the prefix, obviously) would be the most complete (and - with the prefix - compatible) solution.

https://webkit.org/blog/363/styling-scrollbars/

Your suggestion customizes certain parts of the scroll bars and not every state as well (when you click on the part between the arrow and the thumb, it changes its color - but your CSS does not have a way to deal with that, for example).

-webkit have many problems:

1. you can make simplified design
2. i didnt find a way for having a behaviour similar to mobile scrollbar not shown when not used and not using space in the page. Normal scrollbar is consuming space. They are over. For my opinion mobile scrollbar are so intelligent could be replaced in all browsers as default behaviour

similar criterion for optional parts as arrows. But they are a static part so they are very simply divs

I do not understand 1). And how does your suggestion solve 2) exactly…?

1. try do add a image in your thumb scrollbar if you can
2. it is solvible easly in my solution because they are div. Display:none no struggiling solution for developers. You can set it on timeout after a click on scrollbar or you add a css property display_timeout: 300

1. It used to work, this might be a Chrome bug - http://webkit.org/blog-files/scrollbarpicture.png
2. a. It would probably be display-timeout: 300ms (since CSS properties do not use underscores). b. CSS transitions and animations exist for similar purpose, I hardly believe a new property will be created for that (and what about fading it out?). c. They are not <div>, they are pseudo elements, just like those -webkit pseudo elements, only much less complete.

If your goal is to bring the mobile-style scroll bars to desktop, then this is a whole other feature that you want here - and it is probably better served by creating feature requests in the issue trackers of the various browsers, since it is a browser graphical user interface request and not a web platform feature (and those -webkit pseudo elements already resolve the web platform part of your need). One thing that can be proposed to be controlled by the web platform, is perhaps ::scrollbar { appearance: overlay; } or something like that, which would ask the browser (if this is not the default for the current platform) to show overlay scroll bars instead of the normal scroll bars.

Interestingly, if you specify a mobile-compatible viewport on your page and you use Internet Explorer 11 (and maybe Edge, I have not tried), it will use overlay scroll bars by default (not exactly the same as mobile-style scroll bars, but pretty close). It is a little known (and weird, in my opinion) feature.