滚动吸顶四种实现方式的比较

前言

我加入第二家公司时收到的第一个需求就是修复之前外包的滚动天花板效应。当时我很纳闷，为什么一个滚动的顶部会有bug。后来查代码发现直接用了offsetTop属性，没有做兼容性。

偏移

用于获取从当前元素到定位父元素顶部的距离(偏移值)。

定位父元素offsetParent的定义是最接近当前元素的位置！=static的父元素。

可能写这段代码的人没有注意到“定位母公司”这个附属条件。后来在项目中，总会有滚动吊顶的效果。现在，我将详细介绍四种滚动天花板的方法。

目录

使用position:sticky实现偏移()。在JQuery之上，使用原生的offsetTop实现obj.getboundingclientcorrect()。支持明星。

四种实现模式

我们先来看看效果图：

首先，使用position:sticky实现

1.什么是粘性定位？

粘性定位相当于相对定位和固定定位的结合；在页面元素滚动过程中，当一个元素与其父元素的距离满足粘滞定位的要求时；元素的相对定位效果就变成了固定定位固定的效果。

MDN门户

2.怎么用？

使用条件：

父元素不能overflow:hidden或overflow:auto属性必须指定四个值之一：顶部、底部、左侧和右侧；否则只会处于相对定位，父元素的高度不能低于粘性元素的高度。粘性元素仅在其父元素中生效

这种效果可以通过向需要滚动和吸收顶部的元素添加以下样式来实现：sticky { position :-web kit-sticky；位置：粘性；top : 0；}3.这个属性好用吗？

让我们首先看看这个属性在“我可以使用吗：

可以看出这个属性的兼容性不是很好，因为这个API只是一个实验属性。不过这个API在IOS系统中的兼容性还是比较好的。因此，如果我们在生产环境中使用这个应用编程接口，它将与以下方式结合使用。

其次，使用JQuery的偏移量()。顶级实现

我们知道JQuery封装了操作DOM和读取DOM计算属性的API。基于偏移量()的组合。top API和scrollTop()，我们也可以达到滚顶的效果。

.window . addeventlistener(' scroll '，self . handlescrollone)；handleScrollOne:函数(){ let self=this让scrollTop=$('html ')。scroll top()；让offsetTop=$('。title _ box’)。偏移量()。顶部；self . title fixed=scroll top offset top；} .这当然是可能的，但是因为JQuery慢慢退出了历史舞台，所以我们尽量不在代码中使用JQuery的API。我们可以处理本机偏移()。top由我们自己根据offset()的源代码. top .所以有第三种方法。

Scrolltop()有兼容性问题。在微信浏览器、IE和部分火狐版本中，价值为$('html ')。scrollTop()将为0，因此存在第三种方案的兼容性编写。

第三，使用本机offsetTop实现

我们知道，偏移量是相对定位父对象的偏移量。如果需要滚动到顶部的元素出现来定位父元素，offsetTop不会得到元素和页面顶部之间的距离。

我们可以自己为offsetTop执行以下操作：

getOffset:函数(obj，direction){ let offsetL=0；让offset=0；当(obj！==window.document.body obj！==null){ offsetL=obj . offsetleft；offsetT=obj.offsetTopobj=obj.offsetParent} if(方向===' left '){ return offsetL；} else { return offsetT}}使用：

.window . addeventlistener(' scroll '，self . handlescroltwo)；handleScrollTwo:函数(){ let self=this让scroll top=window . pageyoffset | | document . document element . scroll top | | document . body . scroll top；让offsetTop=self.getOffset(self。$ refs . pride _ tab _ fixed)；self . title fixed=scroll top offset top；} .你从以上两个方面看到一些问题了吗？

我们一定要用scrollTop-offsetTop的值来达到滚顶的效果吗？答案是否定的。

让我们一起来看看第四个选项。

第四，使用obj。getboundingclient()。要实现的顶部

定义：这个应用编程接口可以告诉你页面上的一个元素和浏览器窗口之间的距离。使用：tab吸顶，可以使用obj.getboundingcontrol()。top而不是scrollTop-offsetTop，代码如下：

//html div class=' pride _ tab _ fixed ' ref=' pride _ tab _ fixed ' div class=' pride _ tab ' : class=' title fixed==true 'isFixed ' : ' '//某些代码/div/div//vueexport默认{ data(){ return { title fixed : false } }，activated(){ this . title fixed=false；window . addeventlistener(' scroll '，this . handlescroll)；}，methods: {//滚动监控，head fixed handless croll 3360 function(){ let offset top=this。$ refs . pride _ tab _ fixed . getboundingclient()。顶部；this . title fixed=offset top 0；//some code } } } offset top和getboundingclient()之间的区别

1.getBoundingClientRect():

用于获取页面中元素相对于浏览器窗口的左、上、右和下位置。它不包含文档的卷起部分。该函数返回一个具有六个属性的对象：顶部、右侧、底部、左侧、宽度和高度。(在IE中，默认坐标从(2，2)开始计算，只返回顶部、lef、右侧和底部。)

2.offsetTop:

用于获取从当前元素到定位父元素顶部的距离(偏移值)。

定位父元素offsetParent的定义是最接近当前元素的位置！=static的父元素。

offsetTop和offsetParent方法的组合可以获得从元素到主体上边缘的距离。代码如下：

getOffset:函数(obj，direction){ let offsetL=0；让offset=0；当(obj！==window.document.body obj！==null){ offsetL=obj . offsetleft；offsetT=obj.offsetTopobj=obj.offsetParent} if(方向===' left '){ return offsetL；} else { return offsetT}}扩展知识点

偏移距离：

元素在水平方向上占用的空间量：offset with=border-left padding-left with padding-right border-right

偏右：

元素在垂直方向上占用的空间量：offset heat=border-top addition-toft padding-bottom border-bottom

注意：如果有垂直滚动条，offsetWidth也包括垂直滚动条的宽度；如果有水平滚动条，偏移量还包括水平滚动条的高度；

偏移：

元素的上外部边框和offsetParent元素的上内部边框之间的像素距离；

offsetLeft:

元素的左外边框和offsetParent元素的左内边框之间的像素距离；

需要注意的事项

所有偏移属性都是只读的；如果为元素设置了display:none，则其offset属性全部为0；每次访问offset属性都需要重新计算(保存变量)；使用时，DOM可能不会初始化。如果读取该属性，此时将返回0；对于这个问题，我们需要等到DOM元素被初始化。遇到两个问题

首先，吸顶的瞬间伴随着抖动

抖动的原因是：当顶部元素位置变得固定时，该元素从文档流中分离出来，下一个元素被填充。正是这种位填充操作导致了抖动。

该解决方案向天花板元素添加了一个具有相同高度的父元素，我们监控getboundingclientect()。达到天花板效果的父元素的顶值，即：

' div class=' title _ box ' ref=' pride _ tab _ fixed ' div class=' title ' : class=' title fixed==true '？IsFixed' : ' ' '抖动Bug可以通过使用` obj.getboundingclientect () .top '来实现/div/div来解决。

二是天花板效应不能及时响应

这个问题让我很头疼。我以前不在乎。直到有一天跟美团点外卖，我才注意到这个问题。描述：

当页面向下滚动时，直到页面滚动停止，顶部吸收元素才会出现。当页面向上滚动时，顶部吸收元素不会在滚动到文档流位置时恢复，而是在页面停止滚动后恢复。

原因：

在ios系统上，不能实时监控滚动事件，当滚动停止时会触发相关事件。解决方案：还记得第一个解决方案中的位置：sticky吗？这个属性在IOS6及以上系统中有很好的兼容性，所以我们可以区分IOS和安卓设备进行两种处理。

IOS使用position:sticky，安卓使用滚动来监控getBoundingClientRect()的值。顶端

IOS太低怎么办？这里有一个想法：window.requestAnimationFrame()。

以上是边肖介绍的四种滚动天花板实现的详细讲解和整合，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！