Scrolly Zen Thing

dabblet.css

/**
 * Scrolly Zen Thing
 */

.test {
	height: 500px;
	width: 200px;
	background: -webkit-linear-gradient(top, #fafafa, transparent 200px),
	            -webkit-linear-gradient(bottom, #fafafa, transparent 200px),
	            -webkit-radial-gradient(top, rgba(0, 0, 0, .3), transparent 70%),
	            -webkit-radial-gradient(bottom, rgba(0, 0, 0, .3), transparent 70%),
	            #fafafa;
	background-size: 100%, 100%, 100% 5px, 100% 5px;
	background-position: top, bottom, top, bottom;
	background-attachment: local, local, scroll, scroll;
	background-repeat: no-repeat;
	overflow: auto;
}

.test div {
	height: 5000px;
}

dabblet.html

<div class="test"><div></div></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}