Fade in a scrollbar

A script that allows you to fade in a scrollbar.

HTML

<div>
    <div/>
<div>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body > div:first-child {
    background-color: white;
    margin: 50px;
    width: 300px;
    height: 100px;
    overflow: hidden;
    overflow-y: scroll;
    border: 1px solid #ccc;
    position: relative;
}
div > div {
    height: 300px;
    width: 100%;
}

JavaScript

// Get scrollbar width
var inner = $('<p />', {
    style: 'width:100%;height:200px;'
}),
    outer = $('<div />', {
        style: 'position:absolute;top:0;left:0;visibility:hidden;width:200px;height:150px;overflow:hidden;'
    }),
    body = $("body");

outer.append(inner).appendTo(body);

var w1 = inner.get(0).offsetWidth;
outer.css('overflow', 'scroll');
var w2 = inner.get(0).offsetWidth;
if (w1 == w2) w2 = outer.get(0).clientWidth;
outer.remove();

var w3 = w1 - w2;

// We got the scrollbar width in w3

// create a div with scollbar width and append it to body
// we can't append it to the div because for some sort of z-index issues this does not work. Scrollbar will overlap the div
// make sure to give the div the same background-color as its parent
// get offset and width and height of div width scrollbar
var scrolled = $("body > div"),
    offL = scrolled.offset().left,
    offT = scrolled.offset().top + 1, // +1 for strange webkit pixel bug?
    thisW = scrolled.outerWidth(),
    h = scrolled.innerHeight(), 
    pos = offL + thisW - w3 - 1, // - 1 for strange webkit pixel bug?
    bgCl = "red";

$("<div />", {
    style: "width:" + w3 + "px; height:" + h + "px; background-color:" + bgCl + "; position: absolute; top:" + offT + "px; left: " + pos + "px;"
}).appendTo("body").fadeOut(3000);