copy
In 2011, Mac OS X 10.7 removed the buttons from the end of the bar and was designed to look more like the iOS scrollbar. With the same release of Mac OS X 10.7, Apple introduced “natural scrolling,” which means that the screen moves in the same direction as the user’s fingers are moving when they use the two finger scroll gesture. If the user’s fingers move up the trackpad, the content on the page goes up, allowing the user to read content further down the page, and vice versa.
headings

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6
color
button
Download the Chrome Extension
Download the Chrome Extension
Download the Chrome Extension
Download the Chrome Extension
soloLink
Try it live before downloading
label
Built for the Webflow Community.
inlineIcon
Powered for
Webflow developers and so simple a Squarespace developer could do it.
cite
Finsweet went above and beyond to make the website dynamic, responsive, and engaging — the end result far exceeded our expectations.”
eyeCatch
‍
Watch the scrollbar changes live
No account needed. No cost to use
profileInfo
Lucie Guinard
Webflow Expert at Finsweet.com
arrow
dots
feature
Heading
circle
scrollbar
drag
circleIcon

View generated CSS

textureCircle
form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Stay Updated
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
copy
In 2011, Mac OS X 10.7 removed the buttons from the end of the bar and was designed to look more like the iOS scrollbar. With the same release of Mac OS X 10.7, Apple introduced “natural scrolling,” which means that the screen moves in the same direction as the user’s fingers are moving when they use the two finger scroll gesture. If the user’s fingers move up the trackpad, the content on the page goes up, allowing the user to read content further down the page, and vice versa.
headings

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6
button
Download the Chrome Extension
Download the Chrome Extension
Download the Chrome Extension
soloLink
Try it live before downloading
label
Built for the Webflow Community.
eyeCatch
‍
Watch the scrollbar changes live
No account needed. No cost to use
arrow
dots
scrollbar
drag
10px
textureCircle
ui: color
ui: handle
ui: color bar
ui: value bar
ui: opacity bar
ui: label
Scrollbar width
ui: dividers
ui: buttons
This is a UI button
This is a UI button
ui: code
/*width*/
{
   ::-webkit-scrollbar: {
      width: auto;
   }
}

/*track*/
{
   ::-webkit-scrollbar-track: {
      box-shadow: inset 0 0 5px grey;
      border-radius: 10px;
   }
}

/*thumb*/
{
   ::-webkit-scrollbar-thumb: {
      background: red;
      border-radius: 10px;
   }
}
This is some text inside of a div block.
ui: field
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
ui: value
HEX
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
R
G
B
A
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
ui: width
Scrollbar width
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
ui: save
Scrollbar width