javascript之css格式之scrollTop和offsetTop

最新推荐文章于 2024-01-10 15:05:22 发布

iteye_3352

最新推荐文章于 2024-01-10 15:05:22 发布

阅读量245

点赞数

分类专栏： css javaScript 文章标签： jquery scrollTop offsetTop ViewUI

本文链接：https://blog.csdn.net/iteye_3352/article/details/82546156

版权

javaScript 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

css

32 篇文章 0 订阅

订阅专栏

[b][size=medium]关于在jquery中的scrollTop最近看懂了一幅图：[/size][/b]

[img]http://dl2.iteye.com/upload/attachment/0090/5989/fd70fcde-f516-3fe2-b377-f784d1bab319.gif[/img]

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

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

[b]补充说明：[/b]

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

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

[color=green]读取属性(get)：[/color]
这些属性是[color=red]只读[/color]的，反映了实时状态改变的 box 的属性大小。

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

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

[b]2、scrollTop 附练习[/b]

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

效果图：
[img]http://dl2.iteye.com/upload/attachment/0090/5991/11fdc0ca-f88d-3211-b7c8-6ee5c440e061.png[/img]

[b]scroll练习[/b]

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

效果图：
[img]http://dl2.iteye.com/upload/attachment/0090/5996/71ea3205-74ba-3416-b8e4-c0ad3044c558.png[/img]

引用：

[url]http://bbs.csdn.net/topics/350002826[/url]
[url]http://www.cnblogs.com/freewind/archive/2008/05/20/1203183.html[/url]

-

iteye_3352

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript之css格式之scrollTop和offsetTop

[b][size=medium]关于在jquery中的scrollTop最近看懂了一幅图：[/size][/b][img]http://dl2.iteye.com/upload/attachment/0090/5989/fd70fcde-f516-3fe2-b377-f784d1bab319.gif[/img][b]说明：[/b]offset: 抵消磨合、合并offsetT...
复制链接

扫一扫