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!