scrollTop及offsetTop的对比

发布于 2021-1-14 12:18
浏览
0收藏

一 offset
特别说明:offsetTop是只读属性。
offsetTop由如下两个单词构成:
(1).offset:具有偏移量的意思。
(2).top:具有顶部的意思。
此属性的功能确实名副其实,它返回当前元素顶部相对指定元素顶部的偏移量。
这个指定元素由当前元素的offsetParent属性确定。
offsetParent属性返回值简单介绍如下:
(1).返回距离当前元素最近的采用定位祖先元素。
(2).如果祖先元素中没有采用定位的元素,则返回body元素。

1.offsetTop :当前对象到其上级层顶部的距离。
初次接触offset相关api是我天真的以为他会拥有四个方向,但是实验证明仅存下面几种属性
2.offsetLeft :当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.
3.offsetWidth :当前对象的宽度.
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值
4.offsetHeight :当前对象的高度

实例1

子元素 {
            box-sizing: border-box;
            height: 100px;
            width: 100px;
            margin-top: 100px;
            margin-left: 100px;
            background: rgba(255,114,233,0.2);
        }
父级元素{
            /*position: relative;*/
            margin-left: 100px;
            margin-top: 100px;
            width: 400px;
            height: 400px;
            background: rgba(255,244,233,0.9);
        }

 scrollTop及offsetTop的对比-开源基础软件社区

子元素1:宽和高均为100像素,margin-top:100px,margin-left:100px
父级元素:宽和高均为400像素,margin-top:100px,margin-left:100px
 scrollTop及offsetTop的对比-开源基础软件社区
这里大家会看到,我们计算出来的偏移量都是相对于body进行的,但是如果我给父级元素加上定位position:realtive得到的新结果为
 scrollTop及offsetTop的对比-开源基础软件社区

二 scrollTop
设置 <div> 元素中滚动条的垂直偏移,用jq表达更直观一些。

$(".btn1").click(function(){
  $("div").scrollLeft(100);
});

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移。

这里需要提一下 你所匹配到的元素要存在滚动条,否则你懂的~
语法

$(selector).scrollTop(offset)
同理
document.getElementById("selector").scrollTop(offset);

scrollTop及offsetTop的对比-开源基础软件社区注释:该方法对于可见元素和不可见元素均有效。
注释:当用于获取值时,该方法只返回第一个匹配元素的 scroll top offset。
注释:当用于设置值时,该方法设置所有匹配元素的 scroll top offset。

收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐