有时候一个div里面的内容比较高,但是我们希望屏显示,就设定高,会长生垂直滚动条 我们可以隐藏掉这个滚动条,而用上下按钮来控制内容的滚动 页面如下: <!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"); blk.scrollTop=blk.scrollTop+105; } function scrollWindow2(){ var blk = document.getElementById("blk"); blk.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" οnclick="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" οnclick="scrollWindow2()" value="down" /> </body> </html> 用滚动条的距离顶部的高度来控制滚动!~~~