位置:首页 > 软件操作教程 > 编程开发 > JavaScript > 问题详情

JavaScript 使用 scrollLeft 和 scrollTop

提问人:刘团圆发布时间:2020-11-27

■知识点

使用scrollLeft和scrollTop可以读写移出可视区域外面的宽度和高度,具体说明如下。

    scrollLeft:读写元素左侧己滚动的距离,即位于元素左边界与元素中当前可见内容的最左端之间的距离。

    scrollTop:读写元素顶部己滚动的距离,即位于元素顶部边界与元素中当前可见内容的最顶端之间的距离。

使用这两个属性可以确定滚动条的位置,或者获取当前滚动区域内容。

■实例设计

下面的示例演示了如何设置和更直观地获取滚动外区域的尺寸。

<textarea id="text" rows="5" cols="25" style="float:right;">

</textarea>

<div id="div" style="height:200px;width:2OOpx;border:solid 50px red;padding:50px;overflow:auto;">

    <div id="info" style="height:400px;width:400px;border:solid lpx blue;"></div> 

</div>

<script>

var div = document.getElementByld ("div");

div.scrollLeft = 200;                            //设置盒子左边滚出区域宽度为200px

div.scrollTop = 200;                    //设罝盒子顶部滚出区域高度为200px

var text = document.getElementByld("text");

div.onscroll = function(){            //注册滚动事件处理函数

    text.value =     "scrollLeft= " + div.scrollLeft + "\n" +

                       "scrollTop = " + div.scrollTop + "\n" +

                       "scrollWidth = " + div.scrollWidth + "\n" +

                       "scrollHeight= " + div.scrollHeight ;

}

</script>

继续查找其他问题的答案?

相关视频回答
回复(0)

特邀嘉宾

软件开发工程师——刘团圆

软件开发专业科班出身,擅长软件开发课程培训。

向TA咨询

该嘉宾的QQ群

更多>>
返回顶部