首页 > 编程笔记 > JavaScript笔记 > JS操作CSS样式 阅读:483

JS scrollLeft和scrollTop属性:读写元素左侧和顶部已滚动的距离

JavaScript 中,使用 scrollLeft 和 scrollTop 可以读写移出可视区域外面的宽度和高度,具体说明如下: 使用这两个属性可以确定滚动条的位置,或者获取当前滚动区域内容。

示例

下面示例演示了如何设置和更直观的获取滚动外区域的尺寸。
<textarea id="text" rows="5" cols="25" style="float:right;">
</textarea>
<div id="div" style="height:200px;width:200px;border:solid 50px red;
    padding:50px;overflow:auto;">
<div id="info" style="height:400px;width:400px;
    border:solid 1px blue;">
</div>
</div>
<script>
    var div = document.getElementById("div");
    div.scrollLeft = 200;  // 设置盒子左边滚出区域宽度为200像素
    div.scrollTop = 200;  // 设置盒子顶部滚出区域高度为200像素
    var text = document.getElementById("text");
    div.onscroll = function(){  // 注册滚动事件处理函数
        text.value = "scrollLeft = " + div.scrollLeft + "\n" +
                    "scrollTop = " + div.scrollTop + "\n" +
                    "scrollWidth = " + div.scrollWidth + "\n" +
                    "scrollHeight = " + div.scrollHeight;
    }
</script>
演示效果如图所示:

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章