Top值
业务开发中经常会用到元素或者浏览器窗口的各种top值,最近开发组件的过程中也遇到各种问题,因此决定好好总结一下。
常见的top值
scrollTop
Element.scrollTop
属性可以获取或设置一个元素的内容垂直滚动的像素数。
一个元素的 scrollTop值是这个元素的顶部到它的最顶部可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0。
// 获得滚动的像素数
var intElemScrollTop = someElement.scrollTop;
// 运行此代码后, intElemScrollTop 是一个整数,即element的内容向上滚动的像素数。
// 设置滚动的距离
element.scrollTop = intValue;
scrollTop 可以被设置为任何整数值,同时注意:
- 如果一个元素不能被滚动(例如,它没有溢出,或者这个元素有一个"non-scrollable"属性), scrollTop将被设置为0。
- 设置scrollTop的值小于0,scrollTop 被设为0
- 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值.
- window对象或包含有滚动元素的都可以使用scrollTop并设置自己想要的top值
例子:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop
获取window对象的scrollTop存在兼容性问题。
解决方案1
if(window.pageYOffset){//这一条滤去了大部分, 只留了IE678
}else if(document.documentElement.scrollTop ){//IE678 的非quirk模式
}else if(document.body.scrolltop){//IE678 的quirk模式
}
解决方案2
scrolltop = (((t = document.documentElement) || (t = document.body.parentNode)) typeof t.scrollTop == ‘number’ ? t : document.body).scrollTop
offsetTop
HTMLElement.offsetTop
为只读属性,它返回当前元素相对于其 offsetParent 元素的顶部的距离。
元素的offsetTop是相对于父级元素的,并不是直接获取到距离页面顶部的距离,需要区分不同情况!!!
offsetParent
向上寻找有定位的祖先节点,依不同情況会有不同结果:
- 往上寻找position不为static的第一个祖先节点。
- 往上寻找第一个TABLE / TH / TD节点。
- 如果沒有找到则为BODY。
- 如果Element本身为fixed,则为null。
- 文件根节点和BODY的offsetParent为null。
clientTop
一个元素顶部边框的宽度(以像素表示)。不包括顶部外边距或内边距。clientTop 是只读的。
获取元素的top-border宽度。
screenTop
screenLeft和screenTop属性返回窗口相对于屏幕的X和Y坐标。
Element.getBoundingClientRect()
常用于确定元素相对于视口的位置。该方法会返回一个DOMRect对象,包含left, top, width, height, bottom, right六个属性。
getClientRects() 返回一个TextRectangle集合,就是TextRectangleList对象。
其他方法
elementFromPoint() 返回给定坐标处所在的元素
scrollIntoView() 让元素滚动到可视区域
Top值的更多相关文章
- 设置了相对定位relative之后,改变top值,如何去掉多余空白?
众所周知,relative和absolute有一个区别在于relative是相对自身定位,而absolute是相对于最近的定位父级定位,而此时的相对定位经过top值改变其在文档流中的位置之后,自身本来 ...
- 原生js获取left值和top值
在用js做动态效果时,通常需要获取元素绝对定位中的left和top属性值.比如做一个碰撞广告,就要不停的获取元素的top和left属性值. 需要注意的事:取值的元素必须要设置position:abso ...
- 【spark】示例:求Top值
我们有这样的两个文件 第一个数字为行号,后边为三列数据.我们来求第二列数据的Top(N) (1)我们先读取数据,创建Rdd (2)过滤数据,取第二列数据. 我们用filter()来过滤数据 line. ...
- 获取元素top值,屏幕滚动到当前元素
var top = $(this).offset().top; $('html , body').animate({scrollTop: top-100},10);
- 同上 遍历obj的值 来定义当前的后台数据在页面的定位
function getlistRoom(obj) { //obj就是通过ajax传过来的 data for (var i = 0; i < obj.length; i++) {//遍历数据 v ...
- jquery获取、改变元素属性值
//标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性.JS里的DOM属性名有时和原元素属性名不同. //==================================操作元 ...
- offsetLeft, offsetTop以及postion().left , postion().top有神马区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 一个能拖动,能调整大小,能更新bind值的vue指令-vuedragx
一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...
- 前端笔记之jQuery(下)事件&节点操作&净位置&拖拽&页面卷动值&遍历JSON
一.监听事件大全 1.1 JavaScript事件 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onfoc ...
随机推荐
- 编译ijkplayer后直播无声音
打开:ijkplayer-android/config/module-lite.sh 文件: 你要把neyllow打开,默认是关闭的,如下: export COMMON_FF_CFG_FLAGS=&q ...
- mpvue
使用mpvue开发小程序 首先安装 我们使用@vue/cli 无法使用vue init 可以全局安装一个@vue/cli-init npm install -g @vue/cli-init 然后初始化 ...
- Bootstrap treeview增加或者删除节点
参考(AddNode: http://blog.csdn.net/qq_25628235/article/details/51719917,deleteNode:http://blog.csdn.ne ...
- mac环境破解navicat premium 12.1
1. 下载破解工具 https://github.com/DoubleLabyrinth/navicat-keygen/tree/mac 其中,navicat-keygen为破解器:navicat-p ...
- Bootstrap字体无法显示
下载的font文件没有放进你的项目文件里.
- eclipse中的javaEE插件
1.在Eclipse中菜单help选项中选择install new software选项 2.在work with 栏中输入 Juno - http://download.eclipse.org/re ...
- Python paramiko模块基本使用(一)
使用paramiko模块登录远程主机,对日志进行统计分析. import paramiko def batch_count(days, hours, ips, user, passwd, source ...
- Res-Family: From ResNet to SE-ResNeXt
Res-Family: From ResNet to SE-ResNeXt 姚伟峰 http://www.cnblogs.com/Matrix_Yao/ Res-Family: From ResNet ...
- 并发系列2:Java并发的基石,volatile关键字、synchronized关键字、乐观锁CAS操作
由并发大师Doug Lea操刀的并发包Concurrent是并发编程的重要包,而并发包的基石又是volatile关键字.synchronized关键字.乐观锁CAS操作这些基础.因此了解他们的原理对我 ...
- Centos7下杀毒软件clamav的安装和使用
目录 一.yum安装 二.编译安装 2.1:下载软件包 2.2:创建clamav用户和存放病毒库目录 2.3:解压安装包 2.4:安装依赖 2.5:编译安装 2.6:配置clamav 2.7:启动cl ...