ticky位置兼容性问题的JS解决方案

项目中使用了粘性布局，但由于兼容性问题，在Android上兼容性不是很好，所以为了彻底解决这个问题，只能编写一个组件来解决这个麻烦的问题。为什么这里是组件而不是指令，因为有原因，下面会提到。

位置：sticky的兼容性和功能

Caniuse上显示的粘性兼容性如下：

Sticky的功能相当于相对和固定的结合。当修改后的目标节点重新出现在屏幕上时，它以固定的形式显示。因为这个特性，我们可以达到一个粘性的模拟效果。

粘性组件实现

模板部分

template div class=' sticky ' : style=' get position ' div class=' sticky-warp ' slot/slot/div/div/template code解释：我在这里用组件代替指令的原因是虽然指令是无创的，但是使用起来比较方便，但是有一个缺点就是修改后的节点固定后会脱离文档流，这样会改变滚动条的高度。如果只是用原生滚动条实现的话，是没有问题的(当然也会有滚动过快的问题)，但是因为是用自定义滚动实现的，所以是用这种折中的方式实现的。最外层是粘性层，判断浏览器是否支持粘性，不支持就用relative代替，这样浏览器的高度就不会改变，然后动态改变粘翘层的位置来达到效果。

Css部分

样式范围lang=“less”rel=“样式表/less”。粘性{ width : 100%；粘性经纱{宽度：100%；背景：继承；will-change:变更；height:继承；top:继承；} }/样式代码解读：这里翘曲层的背景颜色设置与sticky一致，过渡不会太生硬，高度和顶部根据用户对外层sticky的定制来实现，简单用css就可以完成这部分。

JS部分

脚本类型=' text/babel ' export default { data(){ return } }，computed : { getPosition(){ var position=this。CSS支持('位置'，'粘性')？粘性' : '相对；返回"位置："位置；} }，props: { }，beforeMount () { }，mounted(){ this。init()；},停用(){ if(this。csssupport(' position '，' sticky '){ return；} /*复位*/var elWarp=this .$el.querySelector ' .粘性翘曲');elWarp.position=' absolute}，方法： { init(){ if(this。CSS支持(' position '，' sticky ')} { return；} var el=this .$el，目标=这个$el.parentNode，elWarp=this .$el.querySelector ' .粘性翘曲')，顶部=这个。getnumbervalue(文档。默认视图。获取计算样式(El).顶部);这个。addscrollisten(目标)，(事件)={ if(El。getboundingclientrect().top=top){ elwarp。风格。位置='固定'；} if (el.getBoundingClientRect().top=0 elWarp.style.position！=' absolute '){ elwarp。风格。位置='绝对'；} }) }，cssSupport:函数(attr，value){ var元素=文档。create element(' div ')；if(元素。风格中的attr){元素。style[attr]=值；返回元素。style[attr]==值；} else { return false} }，getnumber value(PxValue){ var value=String(PxValue).match(/^\-？\ ?[0-9]/克；返回值？数字（值):未定义；}，addscrollisten(target，CB){ target。addeventlistener(' y-scroll '，(event)={ CB(event)；});} },}/脚本代码解读：这里面主要先用cssSupport来判断一下浏览器的支持情况，然后通过多自定义滚动y轴事件的监听，监听顶端值的改变来实现粘性翘曲层的固定的；不变的和绝对的的转换。大概原理的思路及实现过程就是上面这样，对于自定义的滚动的开源代码库地址：https://github。com/叶嘉明/滚动，粘性组件以及原生滚动下的指令参考的实现的开源代码库地址如下：https://github。com/明/粘性

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。