How do I customize the cursor for scrollbar-hover in css?

Question

I'm using tumblr. And I use the following code to change the cursor for the main body and hover on links:

body, a { cursor:url("http://i.imgur.com/2qleX.jpg"), auto}
a:hover { cursor:url("http://i.imgur.com/IepP2.jpg"), auto}

But it doesn't seem to affect the scrollbar I have added to one of the containers, which is:

overflow-y: auto;
overflow-x: hidden;

The cursor simply changes back to the default browser cursor when I hover/click the scrollbar. How do I customize the cursor for the scrollbar???

Answer 1

This code will customize the scrollbar Here I'm adding a cursor image when we hover the scrollbar This example will only work in webkit browsers like Chrome, Safari and Opera but not in Firefox or Edge/IE. This is a non-standard way.

body::-webkit-scrollbar-thumb {
  cursor:url("http://i.imgur.com/2qleX.jpg"), auto;
}
p {
  /* force scrollbar */
  height: 200vh;
}

<p></p>

and also you can customize the Scrollbar completely, Use this

body::-webkit-scrollbar {
    /*it will edit the scrollbar area*/
}

body::-webkit-scrollbar-track {
    /*it will edit the scrollbar path*/
}

body::-webkit-scrollbar-thumb {
  /*it will edit the scrollbar thumb which we use to scroll*/
}