JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记 会一个其它的都会了。

<div style=”width:200px;height:200px;background-color:#999999;overflow:auto;” id=”外层元素”>
    <div style=”width:100px;height:300px;background-color:#FFFF00;” id=”内层元素”>
        这些文字显示在内层元素中。
    </div>
</div>
<p>scrollTop值是:<span id=”显示外层元素的scrollTop值”></span></p>
<script type=”text/javascript”>
    var div_外层元素 = document.getElementById(“外层元素”);
    div_外层元素.onscroll = 读取外层元素的scrollTop值并显示出来;
    //注册onscroll事件处理函数。当拖动滚动条时,会产生onscroll事件
    var span_显示外层元素的scrollTop值 = document.getElementById(“显示外层元素的scrollTop值”);
    //onscroll事件的处理函数
    function 读取外层元素的scrollTop值并显示出来() {
        span_显示外层元素的scrollTop值.innerHTML = div_外层元素.scrollTop;
        //读取“外层元素”此时的scrollTop的值并显示出来
    }
    读取外层元素的scrollTop值并显示出来();
    //页面加载完成后,执行一次此函数。显示最初的scrollTop值,此时的值为0
</script>

发表评论