专栏首页菩提树下的杨过scrollTop与offsetTop研究

scrollTop与offsetTop研究

虽然我是做后台出身的,但最近心血来潮越来越关注前台技术了^_^,前二天看了“司徒正美”先生的图片无缝滚动分析后,对于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的高度)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 射雕的"双飞翼布局"

    符合"渐进增强"标准+栅格理论,同时兼容性也不错,几乎没有到用hack <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

    菩提树下的杨过
  • jQuery中排除指定元素,同时选择剩下的所有元素

    场景:某页面用了js延时加载技术处理所有图片,以改善用户体验,但是有几个图片不想延时加载,要求把它们单独挑出来。 研究了一下jQuery的API文档,搞掂了,j...

    菩提树下的杨过
  • 水平/垂直都居中的div

    用css样式使div水平/垂直居中,兼容于目前各种主流浏览器 思路: 用绝对定位将div左顶点,定位于浏览器正中心,然后再利用负的margin,将div...

    菩提树下的杨过
  • 八种创建等高列布局【出自w3c】

    高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可...

    用户3055976
  • 剖析一些经典的CSS布局问题,为前端开发+面试保驾护航

    这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后,它有着块级元素的一些性质例如可以设置宽高等,但它与inline-blo...

    桃翁
  • 2全屏布局<9>

    全屏布局的特点: 1.布局撑满窗口,当浏览器变大的时候,布局也是充满浏览器的窗口 2.滚动条出现在内容区域

    河湾欢儿
  • css常用居中

    windseek
  • 清除浮动的方法

    本章主要介绍三种常用的清除浮动的方法,主要包括: ---- [1] 增加一个空 div, 使用 clear:both 将浮动元素 "挤到" 父元素中 [2] ...

    echobingo
  • padding-bottom 属性

    padding-botom 该属性用于设置标签的底部填充区域的高度,负值无效。

    Html5知典
  • 一天带你入门到放弃vue.js(三)

    自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是vue的指令if,f...

    用户1518699

扫码关注云+社区

领取腾讯云代金券