offset，position，scrollTop/scrollLeft

深入解析offset, position, scrollTop/scrollLeft函数使用
最新推荐文章于 2020-10-02 09:14:36 发布
原创 最新推荐文章于 2020-10-02 09:14:36 发布 · 152 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了offset、position、scrollTop/scrollLeft等DOM操作函数的用法，包括它们如何获取元素的相对位置和滚动条状态。通过实际案例，帮助开发者更好地理解和应用这些关键的JavaScript函数。

offset，position，scrollTop/scrollLeft函数使用

（1）offset：获取当前元素相对于文档 的高度。只对可见元素有效。

(2) position:获取元素相对于最近的一个position为relative or absolute 的元素的祖父节点的相对偏移。

（3）scrollTop/scrollLeft是分别获取该元素滚动条距元素顶端 的距离。

scrollTop指的就是当前元素有滚动条 时，元素的顶部 距离滚动条顶部 (即图红色的部分，千万不要理解为是滚动块那部分)的距离

如果该元素没有滚动条那就无所谓的scrollTop了


即不是到滚动块距离


js中offset、scroll、client三大系列
流楚丶格念的博客
08-21 4156
文章目录offset系列：元素scroll系列：获取元素的样式属性client系列：可视区域案例：图片跟着鼠标飞简单版（有bug，一滚动就不行了）终极版：可以在任何的浏览器中实现 offset系列：元素 获取元素的宽和高,left,top, offsetParent,应该使用offset系列来获取 offsetWidth:获取元素的宽 offsetHeight:获取元素的高 offsetLeft:获取元素距离左边位置的值 offsetTop:获取元素距离上面位置的值 scroll系列：获取元素的样式属性 元
offset、client 和 scroll【JavaScript】
最新发布
2302_77228054的博客
09-24 579
在JavaScript中，offset、client和scroll是用于获取元素位置和尺寸的不同属性或概念。它们之间的区别主要体现在它们的值和使用场景上。
关于底部浮动定位position:'absolute'使用结合ScrollView and TextInput
{竹子}
08-27 2342
在android下，苹果没有测试。底部浮动，输入选择浮动，键盘往上推送 /** * Create by lutn on 2018-08-27 * */ import React,{Component} from 'react'; import {View, TextInput, Text,StyleSheet,ScrollView,StatusBar,Dimensions} from...
【CSS】Css设置position:absolute div标签不随页面滚动而滚动
热门推荐
dkz97的博客
06-30 2万+
问题原因   最近实习在修bug的时候，遇到一个问题。简单来说html的结构就和下面差不多 <body> <!-- 省略多个外部结构 有overflow:auto--> <div id="下拉框点击按钮"> <div id="下拉框窗口" style="position:absolute; left=xxx; top=xxx"> 当然这只是简单的结构 </div> </div> </bo
JQuery Offset实验与应用（转载）
weixin_33939843的博客
12-11 123
我们有时候需要实现这样一种功能：点击一个按钮，然后在按钮的下方显示一个div。当按钮位于角落时，div的位置设定就需要计算，使div完全显示。 　　我打算使用offset()方法实现此功能，但要先弄清楚他的功能。 实验： 　　offset()的top是指元素与document的上边的距离，而不是浏览器当前窗体的上边缘，如图1。  图1：document高度超过window，浏览器出现滚动条...
jquery对象的position和offset方法理解
yakoo5的专栏
12-10 1102
jquery提供了两个方法来获取页面的位置信息，offset方法能够得到元素的绝对位置，position方法是取原始的相对信息，方法返回是一个map对象，key分别是left和top。例如，$(‘#test’).offset().left 得到是id为test的元素距页面左边的像素。 何为绝对位置，何为相对位置呢？不管相对还是绝对，都有一个参照点，对于绝对位置比较简单，它的参照点永远是页面的左上
jQuery方法position()与offset()区别
weixin_34152820的博客
05-19 132
参考别人写得比较明白的，红色部分为重点吧： 使用jQuery获取元素位置时，我们会使用position()或offset()方法，两个方法都返回一个包含两个属性的对象－左边距和上边距，它们两个的不同点在于位置的相对点不同。 可以看看下边的图： 从图中我们可以大体看出两者的区别。 position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离，如...
Jquery位置（offset，position，scrollTop/scrollLeft）
weixin_48340600的博客
10-02 474
1、offset() 获取或设置元素偏移 （1）方法返回被选元素相对于文档的偏移坐标，跟父级没有关系，无论是否定位 （2）方法是一个对象，有2个属性：left、top；offset().top用于获取距离文档顶部的距离 （3）如果括号内加参数，则可以设置偏移offset({top：10，left：30}) 2、positio() 获取元素偏移 方法用于返回元素相对于带有定位的父级元素偏移坐标，如果父级没有定位，则以文档为准...
jQuery 位置操作 offset()、position()、scrollTop()/scrollLeft()
欢迎来到我的博客
12-02 325
jQuery 位置操作 ​jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() 具体介绍如下: 1、offset() 1.1 定义： offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。 1.2 语法： $(selector).offset() 1.3 示例： 获得 <p...
详解原生js实现offset方法
12-02
offest.left = node.offsetLeft + offest.left - node.scrollLeft; // position = fixed: 获取值后退出递归 if (_position === 'fixed') { return; } getOffset(node.parentNode); } } ``` 在这段代码中...
IE6中的position:fixed定位兼容性写法分享
12-07
在实际开发中，考虑到跨浏览器兼容性和性能，通常会结合使用条件注释、Modernizr等工具，或者使用库如jQuery的`.position()`和`.offset()`方法来更优雅地处理此类问题。同时，随着IE6的市场份额逐渐减少，现代浏览器...
offset+position点击按钮弹出提示框，且提示框紧贴按钮
MOONCOM的博客
12-22 771
实现效果：点击按钮弹出绿色区域，绿色区域紧贴按钮，且缩小浏览器边框时，绿色区域依旧紧贴按钮。 代码如下： $(function(){ var top=$("#input1").offset().top; var left=$("#input1").offset().left-100; $("#div1").css({ "top":top, "left":left, });
Jquery中的offset()和position()深入剖析[转]
iteye_3366的博客
03-04 183
&lt;原文地址：http://blog.sina.com.cn/s/blog_995c1f630101ad3v.html&gt;        在jQuery中有两个获取元素位置的方法offset()和position()。position()方法是在1.2.6版本之后加入的，为什么要引 入这个方法呢？这两个方法之间有什么异同？使用的时候应该注意哪些问题？什么时候使用offset(),什么时...
jQuery.htmlClean
hqmln的博客
05-19 1119
jQuery Clean是一个用来对HTML内容进行整理和标签自动匹配的jQuery插件。主要的操作包括，自动关闭标签、自动转小写、自动删除不被识别的标签、格式化缩进等功能   http://code.google.com/p/jquery-clean/     ...
jquery监听鼠标滑轮事件
hqmln的博客
05-30 801
jquery的监听鼠标滑轮事件 $(window).on('mousewheel DOMMouseScroll', function(event) { //如果满足某个状态就不执行后面代码 if (!openedImage) return; event.stopPropagation(); event.preventDefault(); ev...
form插件ajaxForm和ajaxSubmit方法传递对象参数说明
hqmln的博客
11-16 668
form插件的ajaxForm和ajaxSubmit方法的Options对象还可以用来将值传递给jQuery的$.ajax方法。如果你熟悉$.ajax所支持的options，你可以利用它们来将Options对象传递给ajaxForm和ajaxSubmit   ajaxForm和ajaxSubmit都支持众多的选项参数，这些选项参数可以使用一个Options对象来提供。Options只是一个Ja...
sizzlejs选择器
hqmln的博客
01-31 616
解析jQuery选择器引擎Sizzle jQuery从1.3版本开始，使用了新的选择器引擎Sizzle(官方网址http://sizzlejs.com)。Sizzle是jQuery作者John Resig开发的DOM选择器引擎(Dom Selector Engine)，速度号称业界第一。而且它有一个重要的特点就是Sizzle是完全独立于jQuery的，如果用户不想用jQuery，还可以只用Si...
url编辑插件
hqmln的博客
06-09 557
FLQ插件是一个url插件，可以对输入的url地址进行操作，主要包括的方法： 1.set方法把url 转换成FLQ.URL对象 2.removeArg()删除一个指定的参数从FLQ.URL对象 3.addArg() 添加一个参数到FLQ.URL对象4.parseURL() 把一个url字符串地址转换为FLQ.URL对象 5.parseArgs() 把url的查询字符串转换为对象 6t...
HotKeys搞定键盘事件
hqmln的博客
01-07 472
源码地址： https://github.com/jeresig/jquery.hotkeys http://code.google.com/p/js-hotkeys/ 使用方法：$.hotkeys.add('键名', function(){ 要实现的目的}); //键名可以是单键,也可以是组合键例如:ctrl+c就表示同时按下ctrl和c   $.hotkeys.remove('键...
jQuery 1.9.1源码解析：位置与大小操作
本文主要分析jQuery 1.9.1版本中的位置和大小操作相关功能，包括`jQuery.fn.css`, `jQuery.fn.offset`, `jQuery.fn.position`以及`jQuery.fn.scrollLeft`这四个方法。 首先，`jQuery.fn.css(propertyName[, value] ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值