网页卷去的距离与偏移量，JavaScript进阶篇教程-慕课网

网页卷去的距离与偏移量

我们先来看看下面的图：

scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离，即左边灰色的内容。

scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离，即上边灰色的内容。

offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。

offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。

注意:

1. 区分大小写

2. offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

任务

在右边编辑器中，调整横竖滚动条后，点击按钮后，查看offsetTop、offsetLeft、scrollTop、scrollLeft值的变化。

?不会了怎么办: 注意这四个方法的区别，请仔细学习知识讲解内容。

问答
评论
笔记
资料下载
代码

全部精华我要发布

为什么最终结果scrollTop、scrollLeft要比offsetTop、offsetLeft宽？

最新回答 / 幽灵ii

offsetTop,offsetLeft,不随滚动条的拖动而改变，而scrollTop和scrollLefft是滚动条拖动的距离，所以你滚动条拖动的越多，值就越大

1 回答 578 浏览

2022-04-26

为什么 offsetTop 是18px ，而 offsetLeft 是23px？

最新回答 / 走馬勿观花

因为body没有 margin: 0; padding: 0;

3 回答 417 浏览

2020-04-26

为什么偏移量一直都不变啊，看不懂在哪设置的固定大小？

最新回答 / 微虻

如果给div1增加margin或其父级增加margin或padding这个值就会变的

2 回答 1688 浏览

2019-05-15

scrollRight

最新回答 / 小白正在努力

没有该方法的大姐，只有left和tap

2 回答 1839 浏览

2020-06-29

大佬们知道哪个标签能弄出滚轮?

已采纳回答 / 慕斯卡1556068

overflow:auto;

2 回答 1113 浏览

2018-11-16

麻烦大家帮忙看看，我这理解的对不对呢，因为这节完全没学过，求指教

最新回答 / qq_小小麦兜_0

https://blog.csdn.net/k491022087/article/details/52629743

2 回答 1428 浏览

2019-01-10

有大佬会用用C++编写这个吗

最新回答 / 慕勒6779931

这个用go写最简单

3 回答 2066 浏览

2019-06-21

不明白elem.offsetParent.offsetTop+elem.offsetTop是哪部分的距离，求大神指点

最新回答 / Success派

简单的说。就是找元素element的上边界距离根元素的偏移量。下面的网页中有用到的两个属性的简单说明：offsetTop 返回当前元素的上边界到它的包含元素的上边界的偏移量，以像素为单位。offsetParent 返回对最近的动态定位的包含元素的引用，所有的偏移量都根据该元素来决定。

1 回答 1286 浏览

2017-10-19

为什么改变离屏幕顶部的距离和距离屏幕左部的距离的值，却没有什么变化？

已采纳回答 / 武HH

示例里的值是相对于父级对象的偏移量

2 回答 1448 浏览

2022-07-23

7-1,9-21,9-22提交不了

已采纳回答 / qq_Novsummer_0

把代码全部删掉，提交就可以进入下一节了；

3 回答 625 浏览

2017-07-20

9-21这一节的body为什么会有固定高度？

已采纳回答 / 慕勒7123956

body的高度是靠它的内部元素撑起来的，是那个高度为300的div加上按钮的高度撑起来的

2 回答 1452 浏览

2017-06-03

查看Js内置对象的属性/方法代码

最新回答 / 慕勒7123956

内置对象一般是c++写的，你可以去github上面看看v8引擎，个人感觉帮助不大

1 回答 1502 浏览

2017-05-19

关于offsetleft和offsetTop

最赞回答 / Geek喜多川

你可以像定位的那样去理解，就是相对于父级对象的偏移量

2 回答 800 浏览

2022-07-24

offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，就是body噻，干嘛还一层层向上找，直到HTML的body?

最赞回答 / 不知不觉后知后觉嗯

布局中设置postion属性(Relative、Absolute、fixed)的父容器，就是body噻。这句是不对滴，就拿任务中的例子来说，如果给id为div1的上一级父元素设置 position：relative; 那么此时显示出的offsetWidth offsetHeight的值就和之前显示的不同。当然，如果div1的父元素或者更上一级的父元素都没有position这个属性，那么offsetWidth 的值就只能找到div1和body之间的距离了。我们知道body的上一级还有html，你看，他就只能...

2 回答 980 浏览

2017-06-09

全部我要发布

最热最新

只看我的

第九章编程练习(参考代码) 立即下载

9-21 网页卷去的距离与偏移量