offsettop及相关属性介绍

最近的项目中有用到offsetTop属性配合iscroll插件来进行下拉加载的一个效果，经过测试，在其他浏览器都是OK的，但是在iPhone的safari上页面刚加载完以后，滚动部分会有被遮挡一部分，后来发现是因为获取到的offsetTop值在刚开始进来的时候，并不是0，而是120px，这个刚好是节点元素到页面顶部的距离，所以猜测这里应该是offsetparent不对。那么是哪里不对呢？

首先偏移量属性咱们经常会用到offsetLeft、offsetTop、offsetHeight、offsetWidth这四种，然后我们他们的参照点就是offsetParent。我们可以在 HTMLElement.offsetParent里可以看到它只是一个只读属性，而HTMLElement.offsetTop 也是只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。

它的定义是返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素（position不等于static）或者最近的 table,td,th,body元素，在 Webkit 中，如果元素为隐藏的（该元素或其祖先元素的 style.display 为 “none”），或者该元素的 style.position 被设为 “fixed”，则该属性返回 null。

在 IE 9 中，如果该元素的 style.position 被设置为 “fixed”，则该属性返回 null。（display:none 无影响。）

也就是说要获取到正确的offsetTop值，首先要确保它的最近的定位元素不能是fixed和static。其次确保style.display不能为none。

offsettop及相关属性介绍相关推荐

JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍
一.先介绍clientHeight与scrollHeight的区别 clientHeight: 在页面上返回内容的可视高度(不包括边框,边距或滚动条) scrollHeight: 返回整个元素的高度( ...
HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读评论(0) 收藏举报分类: JavaScr ...
clientX与offsetX、clientWidth与offsetWidth的区别
相关属性介绍都要结合鼠标事件监听使用 1.client相关属性获取鼠标位置鼠标相对于视口的位置 e.clientX e.clientY (e是鼠标对象) 获取节点尺寸节点.clientWidt ...
浅谈Iframe和FRAME的区别
一.Iframe标记的使用 Frame标记即帧标记,我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件.现在,我们遇到一种很现实的情况:如有一个教程,是一节一节地上,每页末尾做一个" ...
Flutter基础笔记
目录 List里面常用的属性和方法: Set Map forEach,map, where,any,every extends抽象类和 implements Flutter环境搭建入口文件.入口方 ...
Aidl进程间通信详细介绍
目录介绍 1.问题答疑 2.Aidl相关属性介绍 2.1 AIDL所支持的数据类型 2.2 服务端和客户端 2.3 AIDL的基本概念 3.实际开发中案例操作 3.1 aidl通信业务需求 3.2 操 ...
Toast源码深度分析
目录介绍 1.最简单的创建方法 1.1 Toast构造方法 1.2 最简单的创建 1.3 简单改造避免重复创建 1.4 为何会出现内存泄漏 1.5 吐司是系统级别的 2.源码分析 2.1 Toast( ...
c++builder中dbgrid控件排序_如何实现APP中各种布局效果？学会这几个控件就够了...
学习Flutter有一段时间了,也做了一些APP,但是总感觉对控件的使用一知半解,没有系统的概念,所以特意花了几天时间,把所有的控件都研究了一遍,总结出了常用的控件和使用方法, 俗话说:工欲善其事,必 ...
让网站和APP更具动感的几点建议
[编者按]本文来自Smashing Magazine,作者为Brolik的联合创始人.首席创意官Drew Thomas.文中介绍了Web中增加动感设计可带来的好处及进行动感设计的几点建议,如采用图层技 ...

offsettop及相关属性介绍

offsettop及相关属性介绍

offsettop及相关属性介绍相关推荐

最新文章

热门文章