`
流浪鱼
  • 浏览: 1682940 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

offset，position，scrollTop/scrollLeft

 
阅读更多

offset，position，scrollTop/scrollLeft函数使用

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

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

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

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

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


即不是到滚动块距离


  • 大小: 22.3 KB
  • 大小: 26 KB
分享到：
| jquery中prop()方法和attr()方法的区别
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

    `scrollTop`和`scrollLeft`属性用于获取或设置元素内部滚动条的当前位置，单位为像素。 **示例**： ```html ; height:200px; overflow:auto;"> <p>Scrollable Content</p> <p>Scrollable Content</p> <p>...

    [原创] jQuery源码分析-17尺寸和大小 Dimensions & Offset

    - **返回值用法**：此方法与`.offset()`类似，但是`.position()`获取的是相对于最近的已定位父元素的偏移量，如果元素的父级元素都是默认的`static`定位，则相当于`.offset()`。 示例代码： ```javascript var ...

    第七课 jquery样式尺寸操作1

    - 请注意，`offset()` 和 `position()` 方法只能对可见元素有效。 3. `scrollTop()` 和 `scrollLeft()` 方法： - 获取元素的垂直滚动条位置： ```javascript console.log($("div").scrollTop()); ``` - 设置...

    详解原生js实现offset方法

    offest.left = node.offsetLeft + offest.left - node.scrollLeft; // position = fixed: 获取值后退出递归 if (_position === 'fixed') { return; } getOffset(node.parentNode); } } ``` 在这段代码中...

    jQuery 弹窗对话框拖动 非插件

    position:absolute; display:none} .box_head{ width:400px; height:24px} .box_head h1{ display:block; float:left; width:365px; height:24px; padding:0 0 0 10px; font-size:12px; line-height:24px; overflow...

    JavaScript和jQuery获取input框的绝对位置

    var position = $input.offset(); console.log('Top:', position.top, 'Left:', position.left); ``` 在这个场景中，`input`框可以是任何类型的输入元素，如`<input type="text">`, `<textarea>`, 或自定义的可编辑...

    jquery需要的所有js文件

    "scrollLeft":"scrollTop",e=!1;if(b[d]>0)return!0;b[d]=1,e=b[d]>0,b[d]=0;return e},isOverAxis:function(a,b,c){return a>b&&a,isOver:function(b,c,d,e,f,g){return a.ui.isOverAxis(b,d,f)&&a.ui.isOverAxis(c...

    JQuery CSS 方法说明

    `.offset()`, `.position()`, 和 `.scrollTop()/.scrollLeft()` `.offset()` 返回元素相对于文档顶部和左侧的距离，而`.position()` 返回相对于最近的相对定位的祖先元素的位置。`.scrollTop()` 和 `.scrollLeft()...

    jquery获得页面元素的坐标值实现思路及代码

    `position()`方法与`offset()`类似，但它是相对于第一个已定位的父元素计算偏移。若没有定位的父元素，则等同于`offset()`。 ```javascript // 示例代码 var position = $("#elementId").position(); console....

    IE6中的position:fixed定位兼容性写法分享

    在实际开发中，考虑到跨浏览器兼容性和性能，通常会结合使用条件注释、Modernizr等工具，或者使用库如jQuery的`.position()`和`.offset()`方法来更优雅地处理此类问题。同时，随着IE6的市场份额逐渐减少，现代浏览器...

    JavaScript中的一些定位属性[图解]

    我们将以div元素为例，探讨clientHeight、clientWidth、offsetHeight、offsetWidth、clientTop、clientLeft、offsetTop、offsetLeft、scrollTop、scrollLeft和offsetParent这些属性。 clientHeight和clientWidth ...

    javascript特效

    e.pageX : event.clientX+document.body.scrollLeft; y = (nav) ? e.pageY : event.clientY+document.body.scrollTop; x += x_offset; y += y_offset; beam(1); } function beam(n) { if(n) { if(nav) { eval(...

    jQuery 1.9.1源码分析系列（十三）之位置大小操作

    本文主要分析jQuery 1.9.1版本中涉及的几个关键函数：`css()`, `offset()`, `position()`, `scrollLeft()`, `scrollTop()`, `height()`, `innerHeight()`, `outerHeight()`以及`width()`和`innerWidth()`、`...

    jQuery获取页面元素绝对与相对位置的方法

    在实际开发过程中，合理运用offset()、position()、scrollLeft()和scrollTop()方法，可以大大提升对页面布局控制的灵活性和精确性。无论是进行页面的动态效果处理还是复杂的页面交互设计，对这些知识点的熟练掌握都...

    javascript的offset、client、scroll使用方法详解

    值得一提的是，offset系列属性的offsetParent通常是指离当前元素最近的定位过的（position属性值不是static的）父级元素。而client系列属性和scroll系列属性则不依赖于父级元素，它们始终描述的是元素自身的信息。 ...

    jQUery对应位置定位

    5. `scrollTop()`和`scrollLeft()`: 这两个方法可以获取或设置元素的垂直和水平滚动位置。它们在处理可滚动内容时非常有用，比如滚动到页面某个特定位置。 6. `scrollTo()`: 虽然这不是jQuery内置的方法，但有些...

    js与jquery中获取当前鼠标的x、y坐标位置的代码.docx

    3. 坐标值是相对于文档的，如果需要相对于特定元素的坐标，可以使用`offset()`或`position()`方法。 了解这些基本技巧后，你可以在网页应用中轻松实现跟踪鼠标位置的功能。在开发过程中，这些坐标信息可以用于实现...

    JavaScript获取指定元素位置的方法

    本篇文章将深入探讨几种方法，通过JavaScript获取元素在页面中的位置，并着重讲解`left`、`scrollLeft`、`top`、`scrollTop`和`offsetHeight`等属性的用法。 首先，我们要理解元素位置的概念。一个元素在页面中的...

    牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作

    在JavaScript的世界里，jQuery是一个非常流行的库...- **scrollTop/scrollLeft**：返回元素的滚动条在垂直或水平方向上的位置。 了解这些转换和操作，将使你在使用jQuery时更加得心应手，能高效地处理DOM结构和样式。

Magicbox
Global site tag (gtag.js) - Google Analytics