<div id="theDiv" style="border:1px solid green;width:100px;height:120px;overflow:hidden"> <div id="content"> 1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13<br> 14<br> 15<br> 16<br> 17<br> 18<br> 19<br> 20<br> 21<br> 22<br> 23<br> 24<br> 25<br> 26<br> 27<br> </div> </div> <br> <button id="downButton" onclick="downIt()" >向下</button> <button id="upButton" onclick="upIt()" disabled=true>向上</button> <script language="javascript"> function downIt(){ theDiv.doScroll("pageDown"); resetButton(); } function upIt(){ theDiv.doScroll("pageUp"); resetButton(); } function resetButton(){ upButton.disabled = false; downButton.disabled = false; if(theDiv.scrollTop == 0){ upButton.disabled = true; } if(theDiv.scrollTop == content.offsetHeight - theDiv.clientHeight){ downButton.disabled = true; } } </script> |