scrollTop与offsetTop研究
时间:2022-04-23
本文章向大家介绍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的高度)
- Linux同步机制 - 多线程开发总结
- 谷歌发布升级版语音合成系统,直接从字符合成语音
- 无锁编程 - 大纲
- 无锁编程(一) - Double-checked Locking
- 无锁编程(二) - 原子操作
- 我所理解的Remoting(3):创建CAO Service Factory使接口和实现相互分离
- 无锁编程(三) - 忙等待
- Enterprise Library深入解析与灵活应用(9):个人觉得比较严重的关于CachingCallHandler的Bug
- 无锁编程(四) - CAS与ABA问题
- Linux Kernel CMPXCHG函数分析
- 无锁编程(五) - RCU(Read-Copy-Update)
- 无锁编程(六) - seqlock(顺序锁)
- 无锁编程(七) - 实战
- zookeeper的python客户端安装
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Vue3.0 beta源码学习笔记(二)
- 【自然语言处理】使用朴素贝叶斯进行语种检测
- 关于errno的后事妥善处理
- Vue3.0 beta源码学习笔记(三)
- 你会不会分布式系统进程间通信?
- 学以致用C++设计模式 之 “备忘录模式”
- Mybatis学习笔记(三)关联查询以及相关属性
- 学以致用C++设计模式 之 “装饰者模式”
- 学以致用C++设计模式 之 “责任链模式”
- 学以致用C++设计模式 之 “命令模式”
- 学以致用C++设计模式 之 “中介模式”
- 【自然语言处理】利用LDA对希拉里邮件进行主题分析
- 学以致用C++设计模式 之 “代理模式”
- 学以致用C++设计模式 “模板方法模式”
- 学以致用C++设计模式 “抽象工厂模式”