The -Webkit-scrollbar challenge

dabblet.css

/**
 * The -Webkit-scrollbar challenge
 * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Make the first div’s scrollbar like the second’s 
 * without changing the styling of the div (i.e. you
 * can only change the ::-webkit-scrollbar-* rules
 * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * It doesn't matter if the second div doesn't look the same
 * after your changes, it's only there to show you how the
 * end result should look.
 * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Basically the goal is to see if we can apply some kind
 * of margin to the scrollbars to offset them from the edge
 */
 
div {
	width: 350px;
	height: 250px;
	overflow: auto;
	outline: 1px solid;
	margin:10px;
	box-sizing: border-box;
}

div:first-child {
	padding: 10px;
}

div + div {
	border: 10px solid transparent;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
	position: relative;
	margin:5px;
}


::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
	border-radius: 10px;
}

::-webkit-scrollbar-track {
	box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;
}

::-webkit-scrollbar-thumb {
	background: silver;
}

::-webkit-scrollbar-corner {
	background: transparent;
}

/**
 * The main trick is to play with shadow spread value
 */

div:first-child::-webkit-scrollbar {
	width: 30px;
	height: 30px;
}
div:first-child::-webkit-scrollbar-track {
	background: blue;
}
div:first-child::-webkit-scrollbar-track,
div:first-child::-webkit-scrollbar-thumb {
	border-radius: 30px;
}

div:first-child::-webkit-scrollbar-track {
	box-shadow:
		white 1px 1px 0 10px inset,
		1px 1px 5px 10px rgba(0,0,0,.2) inset;
}
div:first-child::-webkit-scrollbar-thumb {
	width: 10px;
	height: 10px;
	background: none;
	box-shadow: red 0 0 10px 5px inset;
}

dabblet.html

<div>
Patch, metafile recursive bridgeware development pc integer backbone overflow, coordinated. High includes supporting supporting in patch n-tier integral analog high. Digital sampling high element interface bridgeware ethernet reducer supporting. Backbone feedback read-only digital technician infrared prototype bridgeware ethernet network. Controller boolean reflective pc logistically, normalizing, processor resistor potentiometer encapsulated bus disk. 
Patch bypass bypass boolean pc reducer transistorized kilohertz potentiometer kilohertz, infrared. Developer video remote, prototype audio prototype. Broadband resistor hyperlinked femtosecond encapsulated internet femtosecond, supporting ethernet echo frequency. 
Transponder arrray services developer, scan debugged. Bridgeware recursive metafile cache audio, feedback analog, bus reducer distributed. Integer developer read-only, bridgeware fragmentation, services fragmentation bridgeware n-tier partitioned processor. N-tier data resistor harmonic, messaging phaselock, adaptive arrray inversion. 
</div>

<div>
Patch, metafile recursive bridgeware development pc integer backbone overflow, coordinated. High includes supporting supporting in patch n-tier integral analog high. Digital sampling high element interface bridgeware ethernet reducer supporting. Backbone feedback read-only digital technician infrared prototype bridgeware ethernet network. Controller boolean reflective pc logistically, normalizing, processor resistor potentiometer encapsulated bus disk. 
Patch bypass bypass boolean pc reducer transistorized kilohertz potentiometer kilohertz, infrared. Developer video remote, prototype audio prototype. Broadband resistor hyperlinked femtosecond encapsulated internet femtosecond, supporting ethernet echo frequency. 
Transponder arrray services developer, scan debugged. Bridgeware recursive metafile cache audio, feedback analog, bus reducer distributed. Integer developer read-only, bridgeware fragmentation, services fragmentation bridgeware n-tier partitioned processor. N-tier data resistor harmonic, messaging phaselock, adaptive arrray inversion. 
</div>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}