Desktop Equivalent of Touch Scrolling

When developing web sites for mobile devices such as the iPhone, it's easy to assign elegant, scrollbar-less overflow behaviors. On mobile, you can usually make any element handle its overflow beautifully with one line of CSS:

#my_scrollable_element {
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}

But what about desktop? How can you offer elegant scroll behaviors without using overflow:auto, which will bring up ugly scroll bars?

Use overflow:hidden Instead.

You can use overflow:hidden to prevent scroll bars from appearing on an HTML element (such as a div). Then, with just a little javascript, you can provide your own alternative scrolling system.

<style type="text/css">
#my_scrollable_element {
	overflow:hidden;
	width:100px;
	height:100px;
}
</style>

<div id="my_scrollable_element">
	I pledge allegiance to the Flag of the United States of America, and to the republic for which it stands, one Nation under God, indivisible, with liberty and justice for all.
</div>

<script type="text/javascript">
document.getElementById('my_scrollable_element').onclick = function() {
	this.scrollTop += 50;
}
</script>

That's the idea. Making it pretty is up to you.