本文介绍如何解决position:sticky在安卓端的兼容性问题。通过封装Vue组件，判断浏览器支持情况，在不支持时采用relative定位结合自定义滚动事件监听，动态切换fixed与absolute状态，实现兼容的粘性布局效果。
sticky布局的兼容性问题
在项目开发中使用了sticky布局，但由于兼容性问题，在安卓设备上表现不佳。为了彻底解决这一麻烦，决定编写一个组件来处理该问题。之所以选择组件而非指令，是有具体原因的，下文将详细阐述。
position:sticky的作用与兼容性
position:sticky的兼容性以及作用
Caniuse上显示sticky的兼容性如下：
Sticky的作用相当于relative和fixed的结合体，当修饰的目标节点在屏幕中时表现为relative，当要超出的时候是fixed的形式展现，因为这个特性，我们就可以来实现一个sticky的模拟效果。
sticky组件实现
template部分
sticky组件的实现方案
<template>
<div class="sticky" :style="getPosition">
<div class="sticky-warp">
<slot></slot>
</div>
</div>
</template>组件实现原理与代码解读
代码解读：这里我使用了组件来实现，而不用指令来实现的原因是：指令虽然是无侵入性的，更方便使用，可是有一个弊端就是当修饰的节点fixed的时候会脱离文档流，会改变滚动的条的高度，如果仅仅是配合原生滚动条来实现是没问题的（当然这也会存在滚动过快的问题），可是由于是配合自定义滚动所以，采取这种折中的方式来实现。最外层是一个sticky层，判断浏览器是否支持sticky，不支持就使用relative来代替，这样也就不会改变浏览器高度的情况了，然后动态改变stick-warp层的postion来实现效果。
css部分
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部分
JS逻辑与滚动监听
<script type="text/babel">
export default {
data () {
return {}
},
computed: {
getPosition(){
var position = this.cssSupport('position', 'sticky') ? 'sticky' : 'relative';
return 'position:' + position;
}
},
props: {},
beforeMount () {
},
mounted(){
this.init();
},
deactivated(){
if(this.cssSupport('position', 'sticky')) {
return;
}
/*复位*/
var elWarp = this.$el.querySelector('.sticky-warp');
elWarp.position = 'absolute';
},
methods: {
init(){
if (this.cssSupport('position', 'sticky')) {
return;
}
var el = this.$el, target = this.$el.parentNode,
elWarp = this.$el.querySelector('.sticky-warp'),
top = this.getNumberValue(document.defaultView.getComputedStyle(el).top);
this.addScrollListen(target, (event)=> {
if (el.getBoundingClientRect().top <= top) {
elWarp.style.position = 'fixed';
}
if (el.getBoundingClientRect().top >= 0 && elWarp.style.position != 'absolute') {
elWarp.style.position = 'absolute';
}
})
},
cssSupport: function (attr, value) {
var element = document.createElement('div');
if (attr in element.style) {
element.style[attr] = value;
return element.style[attr] === value;
} else {
return false;
}
},
getNumberValue(pxValue){
var value = String(pxValue).match(/^\-?\+?[0-9]+/g);
return value ? Number(value) : undefined;
},
addScrollListen(target, cb){
target.addEventListener('y-scroll', (event)=> {
cb && cb(event);
});
}
},
}
</script>
实现思路与参考资源
代码解读：这里面主要先用cssSupport来判断一下浏览器的支持情况，然后通过多自定义滚动y-scroll事件的监听，监听top值的改变来实现sticky-warp层的fixed和absolute的转换。大概原理的思路及实现过程就是上面这样，对于自定义的滚动的github地址：https://github.com/yejiaming/scroll，sticky组件以及原生滚动下的指令参考的实现的github地址如下：https://github.com/yejiaming/sticky
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。