有时候一个div里面的内容比较高,但是我们希望屏显示,就设定高,会长生垂直滚动条
我们可以隐藏掉这个滚动条,而用上下按钮来控制内容的滚动
页面如下:
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>按钮代替垂直滚动条</title>
<mce:script type="text/javascript"><!--
function scrollWindow(){
var blk = document.getElementById("blk");
blkblk.scrollTop=blk.scrollTop+105;
}
function scrollWindow2(){
var blk = document.getElementById("blk");
blkblk.scrollTop=blk.scrollTop-110;
}
// --></mce:script>
<mce:style><!--
.red{
color:red;
}
.blue{
color:blue;
}
.green{
color:green;
}
.pink{
color:pink;
}
.yellow{
color:yellow;
}
--></mce:style><style mce_bogus="1">.red{
color:red;
}
.blue{
color:blue;
}
.green{
color:green;
}
.pink{
color:pink;
}
.yellow{
color:yellow;
}</style>
</head>
<body>
<input type="button" onclick="scrollWindow()" value="up" />
<div style="height:220px; width:500px;overflow: hidden; border:1px solid #F00" id="blk">
<ul>
<li class="red">123</li>
<li class="blue">12345</li>
<li class="green">1234567</li>
<li class="pink">123456789</li>
<li class="yellow">1234567890</li>
<br />
<li class="red">大家好,我是minnie</li>
<li class="blue">大家好,我是minnie</li>
<li class="green">大家好,我是minnie</li>
<li class="pink">大家好,我是minnie</li>
<li class="yellow">大家好,我是minnie</li>
<br />
<li class="red">123</li>
<li class="blue">12345</li>
<li class="green">1234567</li>
<li class="pink">123456789</li>
<li class="yellow">1234567890</li>
<br />
<li class="red">大家好,我是minnie</li>
<li class="blue">大家好,我是minnie</li>
<li class="green">大家好,我是minnie</li>
<li class="pink">大家好,我是minnie</li>
<li class="yellow">大家好,我是minnie</li>
<br />
<li class="red">123</li>
<li class="blue">12345</li>
<li class="green">1234567</li>
<li class="pink">123456789</li>
<li class="yellow">1234567890</li>
<br />
</ul>
</div>
<input type="button" onclick="scrollWindow2()" value="down" />
</body>
</html>
用滚动条的距离顶部的高度来控制滚动!~~~