javascript之css格式之scrollTop和offsetTop -

Lixh1986

浏览: 1116594 次

最近访客更多访客>>

Z865785437029

akingde

ningzong

蕃薯耀

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript之css格式之scrollTop和offsetTop

博客分类：

css
javaScript

jquery scrollTop offsetTop

关于在jquery中的scrollTop最近看懂了一幅图：

说明：
offset: 抵消磨合、合并
offsetTop：合并后的高度

scrollTop：已滚动过去的高度
scrollHeight：可滚动内容的总高度

补充说明：

element.offsetWidth,
element.offsetHeight: box 的总大小。
                      包括 border, padding, content。
                      不包括 margin

element.clientWidth,
element.clientHeight: box 中内容区域的大小。
                      包括 padding, content
                      不包括 margin, border

读取属性(get)：
    这些属性是只读的，反映了实时状态改变的 box 的属性大小。

设置属性(set)：
    如果想设定（或预先设置） element 的大小，
    请使用 element.style 属性(或写字 css 文件中）

    例如：
    设置box当前的高度到 200px: element.style.height = "200px";

2、scrollTop 附练习

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                  $(".btn1").click(function(){
                    $("div").scrollTop(100);
                  });
                  $(".btn2").click(function(){
                    alert($("div").scrollTop()+" px");
                  });
            });
        </script>
    </head>
    <body>
        <div style="border:1px solid black;width:200px;height:200px;overflow:auto">
            This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
        </div>
        <button class="btn1">把 scroll top设置为 100px</button>
        <br />
        <button class="btn2">获得当前的 scroll top</button>
    </body>
</html>

效果图：

scroll练习

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">
                function insertcode() {
                    var $body = $("body");
                    $body.append('<div style=\" height:1000px; font-size:24px;\">新增项目</div>')
                    $("#page_tag_load").hide();
                }
                $(document).ready(function () {
                    $(window).scroll(function () {
                        var $body = $("body");
                        var $html = "";
                        $html += "<br/>" + ($(window).height() + $(window).scrollTop());
                        $html += "<br/>window.height: " + $(window).height();
                        $html += "<br/>body.height: " + $body.height();
                        $html += "<br/>window.scrollTop: " + $(window).scrollTop();
                        $("#page_tag_bottom").html($html);
                        /*判断窗体高度与竖向滚动位移大小相加 是否 超过内容页高度*/
                        if (($(window).height() + $(window).scrollTop()) >= $body.height()) {
                            $("#page_tag_load").show();
                            //setTimeout(insertcode, 1000);/*IE 不支持*/
                            insertcode();
                        }
                    });
                });
    </script>
</head>
<body>
    <div style=" height:1000px; font-size:24px;">新增项目</div>
    <div id="page_tag_bottom" style=" width:100%; position:fixed; top:0px; background-color:#cccccc;height:100px;"></div>
    <div id="page_tag_load" style=" display:none; font-size:14px;position:fixed; bottom:0px; background-color:#cccccc;height:50px;">加载中...</div>
</body>
</html>

效果图：