跨浏览器兼容性无忧：H5模板适配全设备的终极解决方案

在项目中有用到sticky的布局，可是由于兼容性问题，在安卓端没有很好的兼容，所以为了彻底解决这个问题只能写一个组件来解决这个麻烦的问题，这里为什么是组件而不是指令是因为，是有原因的，下面会讲到。 position:sticky的兼容性以及作用 Caniuse上显示sticky的兼容性如下： Sticky的作用相当于relative和fixed的结合体，当修饰的目标节点再屏幕中时表现为relative，当要超出的时候是fixed的形式展现，因为这个特性，我们就可以来实现一个sticky的模拟效果。 sticky组件实现 template部分 <template> &lt;div clas 在前端开发中，`position: sticky` 是一种CSS布局属性，它允许元素在滚动到某个阈值时在页面上保持“粘性”。然而，`position: sticky` 在某些浏览器，尤其是旧版本的Android设备上可能存在兼容性问题。为了解决这个问题，我们可以采用JavaScript编写一个组件来模拟`position: sticky` 的效果，以确保在所有目标平台上的一致性。 让我们理解`position: sticky` 的工作原理。它实际上是`relative` 和 `fixed` 两种定位方式的结合。当元素在视口内时，它表现得像相对定位；一旦元素开始超出其父容器的边界，它就会转换为固定定位，保持在屏幕的特定位置。这种特性在创建例如表头、侧边栏导航等需要在滚动时保持可视的元素时非常有用。 由于在某些浏览器中`position: sticky` 的兼容性不佳，我们可以创建一个名为“sticky”的Vue组件来实现这个功能。组件的模板部分包含一个外部的`sticky`类的`div`，以及内部的`sticky-warp`类的`div`，用于包裹用户传递的内容。 ```html <template> <div class="sticky" :style="getPosition"> <div class="sticky-warp"> <slot></slot> </div> </div> </template> ``` CSS部分主要负责样式设置，确保`sticky-warp`的背景色与`sticky`层一致，以平滑过渡，并根据用户的定制调整高度和顶部位置。 ```css .sticky { width: 100%; } .sticky-warp { width: 100%; background: inherit; will-change: change; height: inherit; top: inherit; } ``` 接下来，JavaScript 部分用于检测浏览器是否支持`position: sticky`。如果支持，直接使用CSS属性；如果不支持，我们将在滚动事件中动态改变`sticky-warp`的`position`，模拟`position: sticky`的效果。 ```javascript <script> 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.style.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(attr, value) { var element = document.createElement('div'); if (attr in element.style) { element.style[attr] = value; return element.style[attr] === value; } return false; } } }; </script> ``` 在这个组件中，我们使用`cssSupport`方法检查浏览器是否支持`position: sticky`。如果不支持，我们在`init`方法中添加滚动监听器，当元素滚动到指定位置时，改变`sticky-warp`的`position`属性，使其在滚动时固定或绝对定位。在组件被停用时，我们需要恢复原始状态，以防止影响其他操作。 总结起来，通过创建一个Vue组件并利用JavaScript来检测和模拟`position:sticky`，我们可以有效地解决在不支持`position: sticky`的浏览器（尤其是旧版Android设备）上的兼容性问题。这种方式保证了布局在各种环境下的稳定性，同时也提供了良好的用户体验。