一般的な部分スクロールとクリッカブルパーツ

<div id="samp1v" >
	<div id="samp1c" class="container">
		<div >
			<a href="./" >ハイパーリンク。ホームへ</a>
		</div>
		<div >
			<a href="javascript:dispMessage($('#console'), 'href!', 500, 1000);"
				onclick="dispMessage($('#console'), 'アンカークリック', 500, 1000);">
				アンカーのクリックハンドラ</a>
		</div>
		<div >
			<div class="clickablediv"
				onclick="dispMessage($('#console'), 'divクリック', 500, 1000);">
				divのクリックハンドラ</div>
		</div>
		<div >
			<button type="button"
				onclick="dispMessage($('#console'), 'ボタンクリック', 500, 1000);">
				ボタン</button>
		</div>
		<div >
			<input type="text" name="txt" />
		</div>
		<div >
			<input type="checkbox" name="chk" />
		</div>
		<div >
			<label><input type="radio" name="rd" />一番目</label><br/>
			<label><input type="radio" name="rd" />二番目</label><br/>
			<label><input type="radio" name="rd" />三番目</label><br/>
		</div>
		<div >
			<textarea name="tarea"></textarea>
		</div>
		<div>
			<input type="submit" value="このページへ送信" />
		</div>
	</div>
	<div id="console" ></div>
</div>
<div id="stat"></div>

#console{
	position: absolute;
	background-color: rgba(0,0,0,0.8);
	color: #FFFFFF;
	width: 320px;
	height: 40px;
	padding: 12px 0 0 5px;
	left: 100px;
	top: 30px;
	box-shadow 0 0 1px 1px #BBBBBB;
	font-size: 20px;
	text-align: center;
	display: none;
	z-index: 5;

	-webkit-border-radius : 12px;
	-moz-border-radius : 12px;
	-o-border-radius : 12px;
	-ms-border-radius : 12px;
	border-radius : 12px;
}
#samp1v{
	width: 500px;
	height: 200px;
	margin: 10px 0 10px 0;
	border: solid 1px #000000;
	background-color: #FFFFFF;

	-webkit-border-radius : 6px;
	-moz-border-radius : 6px;
	-o-border-radius : 6px;
	-ms-border-radius : 6px;
	border-radius : 6px;
}
#samp1c{
	padding: 10px 10px 10px 10px;
	font-size: 16px;
}
.container > div{
	padding: 10px 0 10px 20px;
}
.clickablediv{
	width: 250px;
	padding: 5px 0 3px 0;
	text-align: center;
	background-color: #EEEEEE;
	box-shadow: 0 0 1px 1px #666666;

	-webkit-border-radius : 12px;
	-moz-border-radius : 12px;
	-o-border-radius : 12px;
	-ms-border-radius : 12px;
	border-radius : 12px;
}
.container input[type=text],.container textarea{
	padding: 3px 3px 3px 2px;
	width: 400px;
	font-size: 14px;
}
.container input[type=radio]{
	height: 30px;
}
	.container input[type=submit], .container input[type=button], .container button{
	padding: 5px 5px 3px 5px;
	font-size: 14px;
}
.bar{
	width:6px;
	position:absolute;
	right:2px;
	background-color:#DDDDDD;
	cursor:pointer;
	box-shadow: 0px 0px 1px 1px rgba(180,180,180,1);
	-webkit-border-radius : 2px;
	-moz-border-radius : 2px;
	-o-border-radius : 2px;
	-ms-border-radius : 2px;
	border-radius : 2px;
}
#stat{
	float: left;
	width: 278px;
	margin: 10px 0 0 20px;
}

//以下をscriptのjqueryロード後の処理に記述します
var samp1 = new Scroller({
	id:'samp1v',
	cntid:'samp1c',
	barclass: 'bar',
	stopborder: false,
	framerate: 60});
samp1.setBar();
samp1.setOnMove(function(nw, cntnsize, viewsize){
	$('#stat').html('viewHeight: '+viewsize+'<br/>containerOuterHeight: '+cntnsize+'<br/>top: '+nw);
});
$('#samp1c').on('touchmove', function(evt){
	evt.preventDefault();
});

//以下の関数をscriptタグ内に記述します
function dispMessage(tgt, msg, duration, spd){
	tgt.html(msg);
	tgt.fadeIn(100, function(){
		setTimeout(function(){
			tgt.fadeOut(spd);
		}, duration);
	});
}