手动滚动文本内容

iteye_14171

于 2010-09-07 21:40:26 发布

阅读量127

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_14171/article/details/81925762

JS 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个简单的页面滚动控制实现方案，通过JavaScript控制div元素上下滚动，同时根据滚动位置启用或禁用向上和向下按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>