How to Customize Scrollbar and Cursor Pointer

How to Customize Scrollbar and Cursor Pointer

CSSJavaScriptHTML

Tanveer Sayem / 2021-02-09

2 min read

Learn how to create a custom scrollbar with CSS. Chrome, Edge, Safari and Opera support the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser's scrollbar.

Customize Scrollbar

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

In order to customize the scrollbar, you have to use ::-webkit-scrollbar property. 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, select the scrollbar

::-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: Codepen

If you click on my affiliates links and shop(anything, not just books), I am going to receive a tiny commission. AND… Most of the time, you will receive an offer. Win/Win! The products that I have are the ones I believe in.

Subscribe to the newsletter

Get emails from me about web development, tech, and early access to new articles.