JS解决解决position:sticky的兼容性问题的方法的兼容性问题的方法
在项目中有用到sticky的布局,可是由于兼容性问题,在安卓端没有很好的兼容,所以为了彻底解决这个问题只能写一个组件
来解决这个麻烦的问题,这里为什么是组件而不是指令是因为,是有原因的,下面会讲到。
position:sticky的兼容性以及作用的兼容性以及作用
Caniuse上显示sticky的兼容性如下:
Sticky的作用相当于relative和fixed的结合体,当修饰的目标节点再屏幕中时表现为relative,当要超出的时候是fixed的形式展
现,因为这个特性,我们就可以来实现一个sticky的模拟效果。
sticky组件实现组件实现
template部分
<template>
<div class="sticky" :style="getPosition">
<div class="sticky-warp">
<slot></slot>
</div>
</div>
</template>
代码解读:这里我使用了组件来实现,而不用指令来实现的原因是:指令虽然是无侵入性的,更方便使用,可是有一个弊端就
是当修饰的节点fixed的时候会脱离文档流,会改变滚动的条的高度,如果仅仅是配合原生滚动条来实现是没问题的(当然这
也会存在滚动过快的问题),可是由于是配合自定义滚动所以,采取这种折中的方式来实现。最外层是一个sticky层,判断浏
览器是否支持sticky,不支持就使用relative来代替,这样也就不会改变浏览器高度的情况了,然后动态改变stick-warp层的
postion来实现效果。
css部分
<style scoped lang="less" rel="stylesheet/less">
.sticky {
width: 100%;
.sticky-warp {
width: 100%;
background: inherit;
will-change: change;
height: inherit;
top: inherit;
}
}
</style>
代码解读:这里的warp层的背景色设置和sticky一致,这样过渡不会太生硬,高度和top都根据用户对外层sticky的自定义来实
现,这样这部分简单用css就可以完成了。
JS部分
<script type="text/babel">
export default {
data () {