How to Customize Scrollbar and Cursor Pointer

Customize Scrollbar

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

::-webkit-scrollbar

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;
}

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

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

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;
}

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>

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;
}

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";
}

Full Code:

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

Comments

[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.

[Coding Jitsu]

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.

[RobertSeidler]

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

[Coding Jitsu]

it was :)

[Jaden Concord]

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