#Webkit scrollbar css code

(In recent nightlies, this pseudo-class now applies to ::selection as well. :window-inactive - Applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active. :corner-present - Applies to all scrollbar pieces and indicates whether or not a scrollbar corner is present. :no-button - Applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track. For track pieces it indicates whether the track piece abuts a singleton button. It is used to detect whether a button is by itself at the end of a scrollbar. :single-button - The single-button pseudo-class applies to buttons and track pieces. For track pieces it indicates whether the track piece abuts a pair of buttons. It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar. :double-button - The double-button pseudo-class applies to buttons and track pieces.

It indicates whether the object is placed after the thumb. :end - The end pseudo-class applies to buttons and track pieces. It indicates whether the object is placed before the thumb. :start - The start pseudo-class applies to buttons and track pieces. It indicates whether or not a button or track piece will increment the view's position when used (e.g., down on a vertical scrollbar, right on a horizontal scrollbar). :increment - The increment pseudo-class applies to buttons and track pieces.

It indicates whether or not the button or track piece will decrement the view's position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar). :decrement - The decrement pseudo-class applies to buttons and track pieces. :vertical - The vertical pseudo-class applies to any scrollbar pieces that have a vertical orientation. :horizontal - The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation. You would like to apply it to.There are a variety of scrollbar properties to choose from, all which must be -webkit prefixed:Įven better is that there are a number of pseudo classes which can be used. Next step: You just need to import the Scrollbar component and wrap the contents div (() => ()) export default ScrollbarWrapper Import styled from ' styled-components ' export const ScrollbarWrapper = styled.

#Webkit scrollbar css code

Check the code example below for details. For example, you can customise the colour using selector scrollbar-color: grey purple on the parent element of the scrollbar.

You can still partly customise the scroll bar for Firefox. You can adjust the size and position to suit your needs.Īnswer: Unfortunately, this custom scrollbar only work on Google Chrome and Safari. I styled the ::-webkit-scrollbar-button:vertical:start:decrement selector with a background image. Question: Can I customise the scroll button with an arrow or other images?Īnswer: The answer is YES. Question: How can I display the scrollbar on the left?Īnswer: set the direction as rtl on the wrapper container, and on the children container, set the direction as ltr. Implemented this component, along with the answers I ended up with. I have been working on a project which requires a custom scroll bar, which I