The cursor you can can change using the cursor
property by specifying an image. Example:
elemento {
cursor:url(http://placehold.it/15x15);
}
It's always a good idea to give a second argument so that when the image is not loaded, the next cursor is called:
elemento {
cursor:url(http://placehold.it/15x15), default;
}
Demo in JSFiddle: link
On the scroll bar, no it is recommended to change it, as this is not included in the W3C standards. The most you can do is to change the scroll bar in one or two browsers, and even then using a lot of CSS lines (which will result in useless data for users who do not use those browsers).
I think it's a good solution using JavaScript, but the idea itself is not good. You can read more about this in other similar questions: