首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >scrollTop与offsetTop研究

scrollTop与offsetTop研究

作者头像
菩提树下的杨过
发布2018-01-23 11:28:40
1.2K0
发布2018-01-23 11:28:40
举报

虽然我是做后台出身的,但最近心血来潮越来越关注前台技术了^_^,前二天看了“司徒正美”先生的图片无缝滚动分析后,对于scrollTop和offsetTop这二个以前一直没搞太明白的属性研究了一番,大致弄明白了,贴在这里备份,测试代码如下:

<!doctype html>
<title>scrollTop study</title>
<style type="text/css">
.outer{}{
    position:relative; /**//*为了兼容IE8,FF3.5,Chrome2,本例中如不加这一行,item2.offsetTop会以body为计算基准*/
    width:100px;
    height:100px;
    border:15px solid #ccc;
    overflow:hidden;
    line-height:18px;
}

.item{}{
    height:60px;
}

.bgColorRed{}{
    background-Color:red;
}

.bgColorGreen{}{
    background-Color:green;
}
</style>

<div class="outer" id="container">
    container
    <div class="item bgColorRed">item1</div>
    <div class="item bgColorGreen" id="item2">item2</div>
</div>
<br/>
<button id="btnTest" >Test</button> <span id="result"></span>

<script type="text/javascript">
    var btn = document.getElementById("btnTest");
    btn.onclick = function(){
        var outer =  document.getElementById("container");
        var item2 = document.getElementById("item2");
        var result = document.getElementById("result");
        outer.scrollTop ++ ;        
        result.innerHTML = "container.scrollTop=" + outer.scrollTop + ",item2.offsetTop=" + item2.offsetTop;
    }
</script>

代码很简单,一个100px的正方形div,border边框值为15px,overflow设置为hidden(隐藏),然后里面放了二个100*60的子div,显然60*2=120px,大于最外层容器的100px高度,所以会有一部分被截掉,为了更形象,二个子div上面还放置了一行文字,高度为18px,点击按钮后,最下面绿色子div的scrollTop递增加1(即位置不断升高,直至完全呈现出来)

为方便理解,还画了一个分析图:(值得注意的是offsetTop属性在ie8的非兼容模式下,还要加上Border的高度)

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2009-10-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档