scrollTop和offsetTop的区别：
scrollTop是指某个可滚动区块向下滚动的距离，比如向下滚动了10个像素，那么这个元素的scrollTop属性值就是10，这个属性的值是可读写的，且不需要设置position
offsetTop则是元素的上边框与父元素的上边框的绝对距离。

scrollLeft：设置或获取对象最左端和对象内容的最左端之间的距离，这个属性的值是可读写的
offsetLeft：获取对象相对于版面或由offsetParent属性指定的父坐标的左侧位置。

调用scrollLeft和scrollTop必须在父元素上，否则无效

taget.style.top 是作用于具体元素的，而不是作用于父元素，要想起作用必须设置position值

scrollTop和offsetTop的区别，scrollTopLeft和offsetLeft的区别的更多相关文章

  1. 花点时间搞清top、clientTop、scrollTop、offsetTop

    [转贴]花点时间搞清top.clientTop.scrollTop.offsetTop   scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前 ...

  2. js “top、clientTop、scrollTop、offsetTop…”

    当要做一些与位置相关的插件或效果的时候,像top.clientTop.scrollTop.offsetTop.scrollHeight.clientHeight.offsetParent...看到这么 ...

  3. js中的各种“位置”——“top、clientTop、scrollTop、offsetTop……”，你知道多少

    当要做一些与位置相关的插件或效果的时候,像top.clientTop.scrollTop.offsetTop.scrollHeight.clientHeight.offsetParent...看到这么 ...

  4. jQuery方法区别:click() bind() live() delegate()区别

    今天看到一篇jquery 事件的文章,自己写了个小例子,虽然2种方式都可以实现,但是不太明白,找了点资料 $("#box1").delegate("p",&qu ...

  5. JAVA基础之——三大特征、接口和抽象类区别、重载和重写区别、==和equals区别、JAVA自动装箱和拆箱

    1 java三大特征 1)封装:即class,把一类实体定义成类,该类有变量和方法. 2)继承:从已有的父类中派生出子类,子类实现父类的抽象方法. 3)多态:通过父类对象可以引用不同的子类,从而实现不 ...

  6. & 和 && 区别和联系，| 和 || 区别和联系

    & 和 && 区别和联系,| 和 || 区别和联系,实际项目中,什么情况用哪种? 首先,& 和 && 的联系(共同点): & 和 &&a ...

  7. js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版【转】

    之前在修改IE6下的一个显示bug时,查到过这些,贴这备忘,后面给出了详细说明,以前的版本,没仔细的说明,特希望大家也收藏下.   网页可见区域宽: document.body.clientWidth ...

  8. javascript中scrollTop和offsetTop的区别

    scrollTop是指某个可滚动区块向下滚动的距离,offsetTop则是元素的上边框与父元素的上边框的绝对距离. 1.offsetTop   : 当前对象到其上级层顶部的距离. 不能对其进行赋值.设 ...

  9. js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

随机推荐

  1. iOS上传App Store报错：this action cannot be completed -22421 解决方案

    最近swift项目升了xcode8,提交版本时,遇到这个: this action cannot be completed -22421 瞬间懵逼,连具体报错原因都没有,只有一个代码 22421,找了 ...

  2. 实现台式机redhat6.4无线网卡上网RTL8188CUS

    台式机装了红帽6.4,无法无线wlan上网,特此用usb无线网卡设置 输入命令lsusb​,可以看到USB无线网卡是 ​Realtek Semiconductor Corp. RTL8188CUS 8 ...

  3. Android界面隐藏软键盘的探索（兼findViewById返回null解决办法）

    最近写的APP,老师说我的登陆界面虽然有ScrollView滑动,但用户体验不太好,因为软键盘会挡住输入框或登录button(小米Pad,横屏,当指定只能输入数字时没找到关闭系统自带键盘的下箭头). ...

  4. MarkDown插入图片

    MarkDown插入图片的语法 ·编辑器:MacDown 比如博客园的Logo,URL是 http://static.cnblogs.com/images/logo_small.gif 在要插入图片的 ...

  5. 新版Microsoft Azure Web管理控制台 - Microsoft Azure New Portal - (3)

    之前我们多次提到过Resource Manager,也知道Resource Manager是Microsoft Azure提供的一种新型资源管理模式.在Service Management模式(Cla ...

  6. Scikit-Learn模块学习笔记——数据集模块datasets

    scikit-learn 的 datasets 模块包含测试数据相关函数,主要包括三类: datasets.load_*():获取小规模数据集.数据包含在 datasets 里 datasets.fe ...

  7. java的构造方法

    当一个类a继承一个类b,类b继承类c,类c继承类d时, 先执行d的构造,然后c.b:当该执行a的构造时,如果有成员变量,就先执行成员变量,最后构造 子类继承父类,子类重写父类的某个方法,当父类构造时, ...

  8. 第64课 C++中的异常处理（上）

    1. C++内置的异常处理:try-catch (1)try语句处理正常代码逻辑 (2)catch语句处理异常情况 (3)try语句中的异常由对应的catch语句处理,如果对应的catch中没有处理该 ...

  9. [No000020]背单词提不起兴趣怎么办？

  10. eclipse 编译android程序 编译错误

    windows->show view -> problems, 这个窗口的内容即为 编译错误的内容.