业务开发中经常会用到元素或者浏览器窗口的各种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

向上寻找有定位的祖先节点,依不同情況会有不同结果:

  1. 往上寻找position不为static的第一个祖先节点。
  2. 往上寻找第一个TABLE / TH / TD节点。
  3. 如果沒有找到则为BODY。
  4. 如果Element本身为fixed,则为null。
  5. 文件根节点和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值的更多相关文章

  1. 原生js获取left值和top值

    在用js做动态效果时,通常需要获取元素绝对定位中的left和top属性值.比如做一个碰撞广告,就要不停的获取元素的top和left属性值. 需要注意的事:取值的元素必须要设置position:abso ...

  2. 【spark】示例:求Top值

    我们有这样的两个文件 第一个数字为行号,后边为三列数据.我们来求第二列数据的Top(N) (1)我们先读取数据,创建Rdd (2)过滤数据,取第二列数据. 我们用filter()来过滤数据 line. ...

  3. 同上 遍历obj的值 来定义当前的后台数据在页面的定位

    function getlistRoom(obj) { //obj就是通过ajax传过来的 data for (var i = 0; i < obj.length; i++) {//遍历数据 v ...

  4. jquery获取、改变元素属性值

    //标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性.JS里的DOM属性名有时和原元素属性名不同. //==================================操作元 ...

  5. offsetLeft, offsetTop以及postion().left , postion().top有神马区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 一个能拖动,能调整大小,能更新bind值的vue指令-vuedragx

    一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...

  7. 前端笔记之jQuery(下)事件&amp;节点操作&amp;净位置&amp;拖拽&amp;页面卷动值&amp;遍历JSON

    一.监听事件大全 1.1 JavaScript事件 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onfoc ...

  8. js获取元素属性值为空的原因和解决办法

    问题描述:js获取某元素的属性值为空 代码: <!-- css定义在head中 --> <style> #box{ width: 100px; height: 100px; b ...

  9. 现有n 个乱序数,都大于 1000 ,让取排行榜前十,时间复杂度为o(n), top10, 或者 topK,应用场景榜单Top:10,堆实现Top k

    一.topK python实现   def topk(k, lst): top = [0 for i in range(k)] #生成一个长度为K 的有序列表 for item in lst: #循环 ...

随机推荐

  1. C# Socket连接 无法访问已释放的对象

    在进行Socket长连接时,若服务器或客户端出现异常时,另外一端对Socket对话进行操作时,程序会出现无法访问已释放的对象的问题.例如客户端出现问题主动断开Socket时,当服务器操作Socket时 ...

  2. 傅盛谈管理的本质zz

    管理的本质就是树立一个核心的业务,让这个业务带着所有的员工和组织构架往前走,而不是去构建一个四平八稳的组织,让所有的业务井井有条. 今天,整个互联网都在回归本原.它让以前看上去极简单的点产生爆发,而不 ...

  3. yum命令不能使用的相关错误

    使用yum安装软件时,出现下面报错 [root@localhost ~]# yum install -y lrzszLoaded plugins: fastestmirror, securityLoa ...

  4. memcache的内存回收机制

    memcache不会释放内存,而是重新利用. 在缓存的清除方面,memcache是不释放已分配内存.当已分配的内存所在的记录失效后,这段以往的内存空间,memcache只会重复利用. memcache ...

  5. UVA 1069 - Always an integer(数论)

    1069 - Always an integer 题意:给定一个多项式,推断是否总是整数 思路:LRJ大白上的例题,上面给出了证明,仅仅要1到k + 1(k为最高次数)带入方程都是整数,那么整个方程就 ...

  6. Lua 基础 -- 学习笔记

    标签(空格分隔): Lua 1. Lua可以一次性给多个变量赋值 变量比赋值多,多的变量就赋值nil 变量比赋值少,多的赋值舍弃 local a, b, c = 1, 2, 3 print( a, b ...

  7. cmd 编译java WebService

    格式:wsimport -s "src目录" -p "生成类所在包名" -keep "wsdl发布地址" 示例: wsimport -s G ...

  8. C# 取Visio模型信息的简易方法

    最近的一个项目,要求导出Visio图纸,因为是建筑类的,所以,需要设置墙壁,门,房间等信息的参数. 拿墙壁为例,选中墙壁模型,右键属性,会弹出以下对话框. 需要设置墙长.墙壁厚度等一些列信息. 现在C ...

  9. Iptables详解七层过滤

    <Iptables详解七层过滤> 一.防火墙简介 防火墙其实就是一个加固主机或网络安全的一个设备或者软件而已,通过防火墙可以隔离风险区域与安全区域的连接,同时不会妨碍风险区域的访问.当然需 ...

  10. Luogu 睡觉困难综合征 ([NOI2014]起床困难综合症)

    一.[NOI2014]起床困难综合症 题目描述 网址:https://daniu.luogu.org/problemnew/show/2114 大意: 有一条链,链上每一个节点包含一个位运算f 与 一 ...