关于javascript:关于position-sticky在小程序中IOS真机下偶然失效的问题总结

尽管小程序中有大把的自定义 sticky 组件可用，原理无非是监听页面滚动扭转 position 来实现，理论体验上卡顿感难以避免，跟原生的 position: sticky 比还是有很大间隔。
最近写的页面曾经开始逐步用上原生 position: sticky，在测试中发现IOS 真机下，某些场景的 sticky 会生效，花了点工夫钻研，得进去以下论断：

1. IOS必须加上position: -webkit-sticky;
2. IOS下 sticky 的元素必须与占位元素在同一个 作用域 上面，才失效 **

间接在页面中写 sticky 无效

page.wxml

<view style="height: 100px">title</view>
<view style="position: -webkit-sticky; position: sticky; top: 40px">sticky</view>
<view style="height: 200vh"></view>

sticky定义在组件内，占位元素在页面里，安卓及模拟器无效，IOS 真机有效

components.wxml

<view style="position: -webkit-sticky; position: sticky; top: 40px">sticky</view>

page.wxml

<view style="height: 100px">title</view>
<components/>
<view style="height: 200vh"></view>

sticky定义在组件内，占位元素组件插槽内，无效

components.wxml

<view style="position: -webkit-sticky; position: sticky; top: 40px">sticky</view>
<slot/>

page.wxml

<view style="height: 100px">title</view>
<components>
  <view style="height: 200vh"></view>
</components>