HTML 5モバイル端末でスクロールバーを実現
2524 ワード
スクロールバーの実装
：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#wrap{
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
background-color: #9ACD32;
}
#inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: chocolate;
}
#content{
position: absolute;
}
</style>
<div id="content"/>
<div id="wrap">
<div id="inner"/>
</div>
<script type="text/javascript">
var inner=document.getElementById('inner');
var content=document.getElementById('content');
//
for(var i=0;i<=1000;i++){
content.innerHTML+=i+'<br>';
}
//
var scaleH=document.documentElement.clientHeight/content.offsetHeight;
inner.style.height=scaleH*document.documentElement.clientHeight+'px';
//
var eleY=0;
//
var mouseS=0;
//
inner.onmousedown=function (event) {
//
eleY=inner.offsetTop;
//
mouseS=event.clientY;
document.onmousemove=function (event) {
//
var mouseE=event.clientY;
//
var disY=mouseE-mouseS;
//
var top=disY+eleY;
//
var topM=document.documentElement.clientHeight-inner.offsetHeight;
if(top<0){
top=0;
}else if(top>topM){
top=topM;
};
inner.style.top=top +'px';
var scale=top/document.documentElement.clientHeight;
content.style.top=-scale*(content.offsetHeight-document.documentElement.clientHeight)+'px';
}
document.onmouseup=function () {
//dom0
document.onmousemove=document.onmouseup=null;
}
//
return false;
}
</script>
</code></pre>
</div>
</div>
</div>
</div>