The body of your CSS document should read as: This takes any content that the body couldn’t display within its given size, and puts it in a scrollbar. Another important aspect here, is to set the “overflow-y” style to ‘scroll’.
It needs to be positioned at 0 for the top, left, and bottom, but add a few pixels on the right so your scrollbar isn’t touching the edges. Your first step, is to alter the body element. For Tumblr blogs, go into Custom HTML mode, and enter/edit changes between the the tags. If you have a WordPress blog, it’s most probably called style.css and is placed within your template directory. All of this resides in the primary stylesheet.
So how does Tim do it then? The trick is to get the default scrollbars not to show, so that the content will be wrapped in a frame of its own-thereby triggering the secondary scrollbar. Webkit provides this features so you can easily style ugly scrollbars within frames, but you can’t stop smart hackers from making the best of it. There’s a catch to this however: you can’t modify the main scrollbar. Turns out, it’s a feature of Webkit that allows you to modify the scrollbar to anything you’d like. As always, when curious on the web, I fire up Safari’s web inspector and look around. It was a regular site, but with a revamped scrollbar totally fitting with his content. When I first saw Tim Van Damme’s blog, the scrollbar immediately got my attention. If you know you can do something better, why not go the extra mile? In this crowded internet space, your site needs to stand out from the mundane. It confuses the users by adding complexity, where simplicity will do just fine. ”Don’t play with the defaults”, people say. This is the same with all other scrollbar properties that we'll use soon.In Goodies A Guide To Using Custom Scrollbars On Your Site Adding a element as a prefix in the selector allows it to only select the scrollbar in that specific element ex.
It is selected via the webkit pseudo selector ::-webkit-scrollbar, which on its own selects all scrollbars on a site.
Webkit scrollbar css full#
The scrollbar container encompasses the entire scrollbar, including the track (spans the full height), and the draggable scrollbar thumb. Let's start with the scrollbar container. Sunt ipsa sapiente expedita aperiam iste suscipit cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto, minima culpa id velit consequatur quae?įont-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif īox-shadow: 0 4px 28px rgba(123,151,158.25) Ģ. Lorem ipsum dolor sit amet consectetur adipisicing elit. The design I wrote for this is minimal, with a blue-gray color palette. We'll start with a basic container element with some placeholder text, which is the element to be scrolled. If you'd like to see the final result, check out the Codepen for this. In this post, we'll be building a minimalist custom scrollbar, similar to that on the web app. CSS-Tricks' scrollbar shows their signature orange and pink look. They can help in portraying key design aspects of a site, whether that be a specific color or a particular style.įor example, the scrollbar at 's web app portrays a very minimalist style. Custom scrollbars on the web can make a site or design stand out.