浅谈JavaScript中的scrollLeft和scrollTop属性

下面本篇文章给大家谈谈JavaScript中的scrollLeft和scrollTop属性。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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

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

演示效果如图所示:

1.gif

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是浅谈JavaScript中的scrollLeft和scrollTop属性的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏