better-scroll使用postion:sticky失效原因分析

前言

记录一个工作中遇到的很小的问题，为什么postion:sticky在better-scroll的列表内部会失效？。

先说结论：暂时无法解决这个问题，曲线救国使用cloneDom（克隆元素），通过滚动到顶部时，将隐藏在滚动区域外部的贴顶元素显示出来。

背景

在移动端开发过程中，希望通过better-scroll能够给用户提供良好的滚动体验，同时业务还需要支持滚动吸顶效果，故在滚动的元素内，添加了一个css属性为postion:sticky的子元，但是后面发现滚动元素并没有效果。

原因

better-scroll通过使用transform实现滚动效果，但父元素的transform会影响子元素的position:sticky，使子元素表现为position:absolute。所以实际上只要滚动的实现是基于css的transform，就一定用不了sticky，只能用cloneDom的方式实现。下面两张图表明了bs的实现结果：

下图为没滚动前的content的样式：

下图为滚动后的content的样式：

由上可见，确实外层包裹了transform，内部无法使用postion:sticky

参考资料

• CSS3 transform对普通元素的N多渲染影响
• Github better-scroll:使用better-scroll导致position sticky吸顶失效 怎么解决