DEV Community

loading...

How to Customize Scrollbar and Cursor Pointer

w3tsa profile image w3tsa ・2 min read

Alt text of image

Customize Scrollbar

In order to customize the scrollbar, you have to use ::-webkit-scrollbar property.

::-webkit-scrollbar
Enter fullscreen mode Exit fullscreen mode

You can specify the width of the scrollbar and also set the scrollbar track or path by setting the background property.

::-webkit-scrollbar {
    width: 15px;
    background: #f7ece1;
}
Enter fullscreen mode Exit fullscreen mode

Next, selecting the scrollbar itself by ::-webkit-scrollbar-thumb

::-webkit-scrollbar-thumb {
    background: #cf5c36;
    border-radius: calc(15px / 2);
}
Enter fullscreen mode Exit fullscreen mode

Furthermore, you can also add some hover effect on ::-webkit-scrollbar-thumb.

Customize cursor

The basic way to customize your cursor is by using the cursor property with url() value.

body {
  cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto;
}
Enter fullscreen mode Exit fullscreen mode

One thing to remember here is you have to use the auto as a fallback value.

However, with cursor: url('...'), auto; you don't have that much control. In order to customize the cursor even more and have more control over the process, we have to use javascript.

At first, we will create a div with a class cursor.

 <div class="cursor"></div>
Enter fullscreen mode Exit fullscreen mode

Let's style this div.

.cursor {
  position: absolute; /* so it is out of the flow */
  width: 20px;
  height: 20px;
  background: white;
  mix-blend-mode: difference;
  border-radius: 50%;
  transform: translate(-50%, -50%); /* so it is center with the cursor pointer */
  transition: 200ms ease-out;
}
Enter fullscreen mode Exit fullscreen mode

Now, let's add JavaScript.

const cursor = document.querySelector(".cursor");

document.addEventListener("mousemove", customizeCursor);

function customizeCursor(e) {
  cursor.style.top = e.pageY + "px"; 
  cursor.style.left = e.pageX + "px";
}
Enter fullscreen mode Exit fullscreen mode

Full Code:

TLDR: Watch the video instead. Customize Scrollbar and Create custom cursor with CSS and JavaScript!

Discussion (5)

pic
Editor guide
Collapse
robertseidler profile image
RobertSeidler

The customized cursor is a little sluggish and the readraw can't quite keep up even with relative slowish mousemovements. Doesn't really seem viable to me yet :(
Maybe there is a more efficient way?

The scrollbar customization would be awesome, but it's webkit exclusive right now (correct me if I'm wrong, btw). Investing much time into designing a really nice custom scrollbar is imo not worth it, when only half your users (I don't know how the distribution of users, between webkit and others, is) get to see it in the end.

I wish the browsers would standardize more of there features more quickly.

Collapse
w3tsa profile image
w3tsa Author

To get the best performance out of custom cursor, we would have to use cursor url css property. In the above example I used a transition to create the lag.

Collapse
robertseidler profile image
RobertSeidler • Edited

oh, I see. Just tried it and that is a usefull thing to know. Was the example in the og post, just to show what else you could influence on cursors? If so, I misunderstood you :D

Thread Thread
w3tsa profile image
w3tsa Author

it was :)

Collapse
jadenconcord profile image
Jaden Concord

Nice article! scrollbar-color and scrollbar-width should be used when customizing the scrollbar to support Mozilla Firefox